[CSS] Style Sheet an IE anpassen

[Zweipunktnull]

Hallo!

Ich bin's nochmal...
Ich habe nun eine erste Version meiner Homepage fertig. Das Problem ist nur, dass sie im Firefox so wie sie aussehen soll aussieht, der Internet Explorer allerdings alles total falsch darstellt. (Die verschiedenen Boxen werden untereinander und nicht nebeneinander dargestellt. Sie überschneiden sich allerdings ein wenig an der linken seite, ist das ein problem für den IE?)
Nun habe ich an verschiedenen Stellen im Internet gesucht...

selfHTML schreibt dazu:
"Eine Möglichkeit hierfür ist, zunächst die nach den Spezifikationen des W3C korrekten CSS-Anweisungen zu notieren und anschließend eine spezielle CSS-Datei nur für den Internet Explorer einzubinden."
Leider steht dort nicht, wie man die CSS-Datei für den IE anpassen muss, sondern nur wie man sie einbindet.

Durch die Forensuche von ForumBase bin ich auf diese Seite gestoßen. Allerdings half mir diese Seite nicht wirklich weiter, denn die fraglichen Befehle (bspw. "float : left;") scheinen ja mit dem IE 6 kompatibel zu sein. (IE 5 und 5.5 werde ich keine Beachtung schenken)

Hier ist mal der CSS-Code. Vielleicht hat ja jemand Zeit/Lust mir zu helfen und mir zu sagen, wie ich die CSS-Datei anpassen muss.

body {
 width : 1000px;
 margin : auto;
 background-color : #ffff99;
 font-family : tahoma,verdana,sans-serif;
 color : #000000;
 }

div#ueberschrift {
 width : 98%;
 height : 13%;
 padding : 1%;
 background-color : #ff9900;
 font-size : 500%;
 color : #000000;
 text-align : center;
 border : thin solid #000000;
 }

div#navigross {
 width : 23%;
 float : left;
 margin-top : 1%;
 padding : 1%;
 background-color : #ffcc00;
 font-size : 125%;
 color : #000000;
 border : thin solid #000000;
 }

div#navigross ul {
 margin : 0%;
 padding : 0%;
 }

div#navigross li {
 color : #000000;
 margin : 2.5%;
 padding : 2.5%;
 border : thin solid #000000;
 background-color : #ffffcc;
 list-style : none;
 }

div#navigross a {
 text-decoration : none;
 color : #000040;
 background-color : #ffffcc;
 }

div#naviklein {
 width : 73%;
 margin-left : 20%;
 padding-top : 1%;
 padding-right : 1%;
 padding-bottom : 1%;
 padding-left : 6%;
 background-color : #00cc00;
 color : #000000;
 text-align : right;
 border-left : thin solid #000000;
 border-right : thin solid #000000;
 border-top : none;
 border-bottom : none;
 }

div#naviklein a {
 text-decoration : none;
 color : #000040;
 background-color : #00cc00;
 }

div#seite {
 width : 73%;
 min-height : 70%;
 margin-left : 20%;
 padding-top : 1%;
 padding-right : 1%;
 padding-bottom : 1%;
 padding-left : 6%;
 background-color : #ffffcc;
 color : #000000;
 text-align : justify;
 border-top : thin solid #000000;
 border-right : thin solid #000000;
 border-left : thin solid #000000;
 border-bottom : none;
 }

div#fusszeile {
 width : 98%;
 padding : 1%;
 background-color : #ff9900;
 color : #000000;
 border : thin solid #000000;
 }

table {
 width : 100%;
 table-layout : fixed;
 }

img {
 border : none;
 }

Ein anderes Darstellungsproblem, zu dem ich nichts gefunden hab, ist folgendes:
Beim IE ist zwischen den Zeilen, wenn ich einen <br></br> machen wirklich sehr viel Platz. Eigentlich dürfte gar keiner sein, schließlich ist es nur ein Zeilenumbruch...
Vielen Dank schonmal im Voraus!

 

[KonKorT]

Also ich kann aus Erfahrung sagen, dass 50 und 50% bei dem IE6 noch lange nicht 100 ergeben

Also wenn Du zwei gleiche div-container hast, die gefloatet werden, würde ich beispielsweise eher 49 und 49 oder gar 48 und 48 nehmen; dann dürften auch die beiden Boxen im IE nebeneinander sein. Zu der besagten Einbindung einer extra IE6 Datei, das schaut folgendermaßen aus:

<link rel="stylesheet" href="style.css" type="text/css" />
	<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->

Das einfach in den Head-Bereich der HTML Datei einbinden, natürlich sollten dann auch die entsprechenden Dateien, in dem Fall "style.css" (normales Stylesheet) und "ie6.css" (Spezielles IE6 Stylesheet da sein).

In jene "ie6.css" kommen dann alle abweichenden Werte einer Klasse oder id rein, dazu einfach mal folgendes Beispiel:

style.css Inhalt:

.test {
           font-family: Verdana;
           font-size: 14px;
           font-weight: bold;
         }

ie6.css Inhalt:

.test {
           font-size: 13px;
          }

Das ganze liefe dann so ab. Die Klasse Test würde in Verdana, fett sein und in allen Browsern in 14px bis eben auf den IE6, der die Klasse Test dann mit 13px darstellt. Hoffe konnte es einigermaßen verständlich rüberbringen...

 

[Zweipunktnull]

okay, das hab ich gechecked werds nachher ma ausprobieren (jetz muss ich erstma wieder innen unterricht ich will wieder zurück in die mittelstufe! )
ich muss ins "IE stylesheet also nur die veränderten angaben schreiben, alle anderen werden vom normalen mit übernommen, richtig?

muss ich denn sonst nochwas anpassen, außer die breite der verschieden elemente?

 

[Adagio]

Wichtig ist für den IE auch, was für einen Doctype du benutzt. Bei einem falschen interpretiert der IE6 das CSS Boxmodel nämlich falsch.

 

[Zweipunktnull]

hm... es funktioniert nicht.
der ie scheint ein problem damit zu haben, dass meine navigationsleiste sich etwas mit der box "seite" (also der eigentliche indiviuelle seiteninhalt) überschneidet.
wie bring ichs dem ie bei, dass die dinger sich überschneiden sollen? wie gesagt, im firefox funktioniert alles...

 

[Adagio]

Ja, ignorier meine Antwort ruhig

Ohne zu wissen, welchen Doctype du benutzt und wie überhaupt dein HTML aussieht, können wir alle nur raten. Also, mehr Infos bitte

 

[Zweipunktnull]

okay, hier die html-datei

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

 <head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
  <meta http-equiv="Content-Style-Type" content="text/css"></meta>

  <title>Titel</title>

  <link rel="stylesheet" type="text/css" href="./stylesheet.css"></link>
  <!--[if ie]>
      <link rel="stylesheet" type="text/css" href="./stylesheetie.css"></link>
     <![endif]-->

 </head>

 <body>

  <?php
   error_reporting(E_ALL+E_STRICT);
   include('./ueberschrift.php');
   include('./navigross.php');
   include('./naviklein.php');
  ?>
  
  <div id="seite">
   <p>
    Box 4
   </p>
  </div>

  <?php
   error_reporting(E_ALL+E_STRICT);
   include('./fusszeile.php');
  ?>

 </body>

</html>