IE6 zerschießt Logo-Bereich (CSS)

Aladdin · 09.03.2008, 12:42

Ich hab mir mal die Sektion der typischen IE-Bugs angeschaut, aber ich weiss nicht so recht, was hier zutrifft. Ich schildere das Problem:

In Safari wird alles korrekt dargestellt, im IE6 entsteht eine unerklärliche Lücke zwischen Logo-Bereich und Navigation (s. Fragezeichen). Ich kopiere die entsprechenden Stellen des Codes hier rein:

Code:

<body>
  <div id="container">
    <div id="pic_area"><img src="path/to/pic.jpg" /></div>
    <div id="logo_area"><a href="/"><img src="path/to/logo.jpg" /></a></div>
    <div class="clearboth"></div>	
  <div id="primary_nav_bar">...NavLinks...</div>
  ...
</body>

Code:

#container{
  width:1000px;
  background: url(images/container-bg.png) repeat-y;
  margin:auto;
  padding-bottom:20px;
  text-align:left;
}

#pic_area{
  border-left: #888 1px solid;
  width:699px;
  height:239px;
  float: left;
}

#logo_area{
  background: #555;
  border-right: #888 1px solid;
  width:299px;
  height:239px;
  float: right;
}

Ich wette, das hat irgendwas mit margin/padding/border oder so zu tun. Aber ich finde den Fehler nicht. Über jeden Tipp wäre ich sehr dankbar!

Adromir · 09.03.2008, 13:52

Was für einen Doctype verwendest du?

Aladdin · 09.03.2008, 13:54

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Adromir · 09.03.2008, 14:12

Mmh.. Rendert der Browser auch im Standardkonformen Modus?

Aladdin · 09.03.2008, 14:13

1. Wie finde ich das raus?
2. Hat der IE6 überhaupt einen standardkonformen Modus... ;-)

IE7 stell's übrigens korrekt dar. Ich überprüfe das via http://browsershots.org

Adromir · 09.03.2008, 14:28

Rufe deine Seite im Browser auf und gib in die Adresszeile

javascript:alert(document.compatMode);

ein. Wenn sowas wie CSS1Compat zurück gegeben wird, dann arbeitet der IE im Standardmodus.

Aladdin · 09.03.2008, 14:34

Ich hab das jetzt bei Firefox 3 beta (Mac) in die Browserzeile eingegeben. Resultat war CSS1Compat.

Aladdin · 09.03.2008, 15:47

Sind da vielleicht irgendwelche Margins oder Paddings, die dem IE nicht passen könnten?

Die verlinkten Hintergrundbilder hatte übrigens ursprünglich eine Größe von 700x240 bzw 300x240. Die divs aber nur Breiten von 699 und 299, da jeweils an einer Seite noch eine 1x border dran war.

Für alle Browser war das ok, nur der IE6 hat das rechte Bild in eine neue Zeile gerückt. Den Fehler hab ich schon mal weg bekommen, indem ich die Bilder an sich auch auf 699x239 gestutzt habe.

Aber diesen Fehler hier finde ich einfach nicht.

Adromir · 09.03.2008, 15:54

Es kommt auf den IE an (da musst du das Testen), weil der nämlich aus verschiedenen Gründen immer wieder in den Quirksmode geht, während die anderen Browser im Standardkonformen Modus rendern.

Aladdin · 09.03.2008, 20:08

Auch der IE6 sagt CSS1Compat

Aladdin · 28.03.2008, 09:57

Keiner ne Idee, wo der Fehler liegen könnte oder was ich noch überprüfen kann?

th2409 · 28.03.2008, 11:57

Ich denke mal, das Problem kommt von

<div class="clearboth"></div>

Da steht zwar theoretisch nix drin, aber praktisch macht der IE ohne Höhenangabe eine Zeile daraus. Die sieht dann also nach einem Abstand aus. Vielleicht solltest Du diese Codezeile rausnehmen (ist ohnehin "unsemantisch") und der nachfolgenden Zeile

<div id="primary_nav_bar">...NavLinks...</div>

im CSS ein clear: both mit auf den Weg geben.

Aladdin · 28.03.2008, 13:30

Danke. Bringt aber leider nichts (s. Screenshot). Es wundert mich auch, dass sich die primary_nav_bar offensichtlich nicht über die ganze Breite erstreckt. Kann und würde gerne jemandem den Code inkl. css per PN zuschicken, damit er/sie sich das mal im Detail anschauen kann.

Blöderweise hab ich hier auf dem Mac noch nicht mal einen IE zum Testen (sondern leider nur Browser, die sich an die CSS Spezifikationen halten...). Bin daher immer auf net renderer angewiesen. Macht das Debuggen nicht gerade einfacher.

Aladdin · 05.04.2008, 12:06

Kann da wirklich niemand weiterhelfen?

Rinaldo · 05.04.2008, 17:39

Zeig doch mal bitte die Site online - mit Code-Schnipseln und Screenshots kommt man hier wohl nicht mehr weiter...