Problem mit CSS-Positionierung und IE 6

Beitrag von **robo** » 17.11.2004, 05:07

Hi Leute,

ich bin gerade am verzweifeln. Ich wollte einer Site ein neues Layout verpassen und in diesem Zuge gleich auf ein tabellenloses Layout mit CSS umstellen. Leider ärgert mich der IE 6 und ich weiss nicht, wie ich das in den Griff bekommen soll.

Hier erst mal ein Stück Code:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http&#58;//www.w3.org/TR/html4/loose.dtd">

<html>
 <head>
  <title>CSS-Test</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta http-equiv="Content-Language" content="de">
  <style type="text/css">
  
   body &#123;
     color&#58; #000000;
     background-color&#58; #f0f0f0;
     font-size&#58; small;
     font-family&#58; Arial, Helvetica, sans-serif;
     margin&#58; 0px;
   &#125;

   #info &#123;
     position&#58; absolute;
     top&#58; 0px;
     left&#58; 0px;
     margin&#58; 10px;
     width&#58; 190px;
     height&#58; 110px;
     padding&#58; 5px;
     background-color&#58; #c0c0c0;
     overflow&#58; hidden;
   &#125;

   #kopf &#123;
     margin&#58; 100px 10px 10px 220px;
     height&#58; 110px;
     padding&#58; 5px;
     background-color&#58; #c0c0c0;
     overflow&#58; hidden;
   &#125;

   #navi &#123;
     position&#58; absolute;
     top&#58; 130px;
     left&#58; 0px;
     margin&#58; 10px;
     width&#58; 190px;
     padding&#58; 5px;
     background-color&#58; #c0c0c0;
   &#125;

   #inhalt &#123;
     margin&#58; 10px 10px 10px 220px;
     padding&#58; 5px;
     background-color&#58; #d0d0d0;
   &#125;

  </style>
 </head>
 <body>
 
  <div id="info">
   <h1>Info</h1> 
   Ein bissl Text ...
  </div>
  
  <div id="kopf">
   Hier kommt eine Grafik hin ...
  </div>
  
  <div id="navi">
   <a href="#">Ein Link</a><br>
   <a href="#">Ein Link</a><br>
   <a href="#">Ein Link</a><br>
   <a href="#">Ein Link</a><br>
   <a href="#">Ein Link</a><br>
   <a href="#">Ein Link</a><br>
   <a href="#">Ein Link</a><br>
  </div>
  
  <div id="inhalt">
   <h1>Hier kommt dann der Content hin ...</h1>
   Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
   bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
   bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
   bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
   bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </div>
  
 </body>
</html>

Das Problem ist, dass der IE 6 die Box "Kopf" direkt oben an den Rand pappt, obwohl ein Abstand (margin) angegeben ist. Woran liegt's und wie bekomme ich das in den Griff? Dass Mozilla die Seite wie erwartet rendert, brauche ich ja hoffentlich nicht zu erwähnen.

BTW, wenn ich beim Doctype die Adresse weglasse, also nur '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">' schreibe, dann verhält sich der IE 6 offenbar wie der IE 5 und zeigt so gut wie keinen Abstand mehr richtig an. Ich dachte, der IE 6 macht das nur, wenn er gar keinen Doctype findet?

cu, Robo

von **Anzeige von ABAKUS** »

Beitrag von **Caesar** » 17.11.2004, 06:32

#kopf {
margin-top:
margin-left:
padding: 5px;
background-color: #c0c0c0;
overflow: hidden;
}

Beitrag von **robo** » 17.11.2004, 12:42

Caesar:

Hmmm ... das was du vorschlägst, macht aber was ganz anderes, als ich haben will. Mein Code funktioniert in Mozilla prima, nur der IE zickt rum.

All:

Kennt vielleicht jemand ein gutes, spezialisiertes Forum für solche schweren Fälle?

cu, Robo

von **Anzeige von ABAKUS** »

Beitrag von **Jörg** » 17.11.2004, 14:16

Der Bug wird scheint's durch die Höhenangabe in #kopf verursacht, wenn du die dort rausnimmt, und diese für einen div-Container verwendest, der innerhalb von #kopf sich befindet, sollte es gehen

Code: Alles auswählen

  <div id="kopf">
  <div id="innen">
   Hier kommt eine Grafik hin ...
   </div>
  </div>

Code: Alles auswählen

#kopf &#123;
     margin&#58; 100px 10px 10px 220px;
     padding&#58; 5px;
     background-color&#58; #c0c0c0;
     overflow&#58; hidden;
&#125;
#innen &#123;
     height&#58; 110px;
&#125;

Beitrag von **robo** » 17.11.2004, 14:57

Jörg hat geschrieben:Der Bug wird scheint's durch die Höhenangabe in #kopf verursacht, wenn du die dort rausnimmt, und diese für einen div-Container verwendest, der innerhalb von #kopf sich befindet, sollte es gehen

Ahrgl, das ist doch krank. Das führt ja das ganze Konzept ad absurdum. Dann haben wir wieder die gleiche Verschachtelungs-Orgie wie früher mit den Tabellen, nur eben mit DIVs ...

Jedenfalls danke für deine Antwort, ich weiss nicht, ob ich da jemals drauf gekommen wäre.

Wie bist eigentlich du drauf gekommen? Erfahrung? Rumprobieren? Irgendwelche Tips, wie ich an solche CSS-Probleme (in Mozilla geht's, im IE nicht) in Zukunft rangehen kann?

cu, Robo

Beitrag von **Jörg** » 17.11.2004, 15:41

Divs kann man ruhig zigmal verschachteln, sie vermitteln im Gegensatz zu Tabellen ja keine strukturelle Bedeutung

Wenn eigene Fehler ausgeschlossen sind, schaue ich in einem ersten Schritt immer nach dem Element / Attribut, welches genau den Bug auslöst (z.B. durch Auskommentieren) - im zweiten Schritt überlege ich mir, wie ich es alternativ umsetzen kann, ohne dass andere Browser rebellieren; naja, Erfahrung die auch durch Rumprobieren erweitert wird

bei komplizierten Bugs bemühe ich noch Google

Beitrag von **robo** » 17.11.2004, 16:10

Jörg hat geschrieben:Divs kann man ruhig zigmal verschachteln, sie vermitteln im Gegensatz zu Tabellen ja keine strukturelle Bedeutung

Klar, aber durch die Verschachtelungen wird der Code nur fett, kompliziert und unübersichtlich.

cu, Robo

Beitrag von **Southmedia** » 17.11.2004, 16:13

Wieso setzt du die Grafik in ein div und positionierst sie nich einfach selbst?

Beitrag von **Jörg** » 17.11.2004, 16:47

@robo

ja, der Aufbau sollte natürlich so einfach wie möglich sein, und zusätzliche Divs nur dort eingesetzt werden, wo nötig, d.h. wo man keine andere Möglichkeit hat, um Browserbugs aufzufangen; vielleicht reicht es auch, die Höhe alleine für die betreffende Grafik festzulegen, dann braucht's keine zusätzliche Div, das wäre natürlich die beste Lösung

Beitrag von **robo** » 17.11.2004, 16:50

Southmedia hat geschrieben:Wieso setzt du die Grafik in ein div und positionierst sie nich einfach selbst?

Weil ich sie als Hintergrund einbinde, damit sie einfach rechts abgeschnitten wird und kein Scrollbalken erscheint, wenn man das Fenster schmäler macht.

cu, Robo

Beitrag von **operator** » 20.11.2004, 09:05

geht das nicht auch mit <body background=bild.jpg> ?