Div wird im IE zu lang dargestellt

[Tim Blog]

Hallo,

ich habe ein kleines Problemchen mit der Darstellung des folgenden Codes im IE. Mit Mozilla und FF sieht alles in Ordnung aus, daher denke ich es liegt wohl am IE.

HTML (valid laut w3.org):
QUOTE <div class="navi">
<div class="navi_kante_oben"></div>
<div class="navi_kategorien1"></div>
<div class="navi_kategorien2">
</div>
<div class="navi_neu1"></div>
<div class="navi_neu2">
</div>
<div class="navi_kante_unten"></div>
</div>


CSS (valid laut w3.org):

QUOTE .navi { position:absolute; top:190px; left:0px; width:150px; background-image:url('grafiken/br4.gif' background-repeat:repeat-y; padding:0px; margin:0px;}

.navi_kante_oben { width:150px; height:15px; background-image:url('grafiken/grafiken-navi-kante-oben.gif' background-repeat:no-repeat; padding:0px; margin:0px;}

.navi_kategorien1 { width:150px; height:30px; background-image:url('grafiken/grafiken-kategorien.gif' background-repeat:no-repeat; padding:0px; margin: 10px 0px 0px 0px; }

.navi_kategorien2 { width:150px; padding:0px; margin: 5px 0px 0px 0px; background-image:url('grafiken/br4.gif' background-repeat:repeat-y;}

.navi_neu1 { width:150px; height:30px; background-image:url('grafiken/grafiken-neu.gif' background-repeat:no-repeat; padding:0px; margin: 20px 0px 0px 0px; }

.navi_neu2 { width:145px; padding:0px; margin: 5px 0px 0px 0px; background-image:url('grafiken/br4.gif' background-repeat:repeat-y;}

.navi_kante_unten { width:150px; height:15px; background-image:url('grafiken/grafiken-navi-kante-unten.gif' background-repeat:no-repeat; padding:0px; margin: 10px 0px 0px 0px; }


Das Problem sieht folgendermaßen aus im IE wird unter der untersten Navi Kante (.navi_kante_unten) noch einmal das background-image von .navi angezeigt. Sprich der unterste div sitzt im IE nicht am unteren Ende des gesamten divs.

Kennt da jemand eine Lösung, ggf. auch wie man die divs anders setzen könnte?

vielen dank

gruß

Tim

 

[Stefan Brinkers]

in dem letzten div steht nix drin oder?

eine Beispielseite wäre hilfreich.

 

[Tim Blog]

Das Problem kann man hier bewundern

.

danke

Tim

 

[Stefan Brinkers]

ganz verstehen tu ichs auch nicht, aber ich glaube der Internetexplorer denkt sich einfach ein
&nbsp in das "navi_kante_unten"-div rein.
Fügt man nämlich &nbsp in den Quelltext ein, wirds auch bei den anderen Browsern falsch dargestellt.

Lösungsvorschlag:
entweder ein Leergif in das div packen von 1px mal 1px
oder aber die bessere Variante: eine Schriftgröße von 1px für dieses div festlegen, also in etwa so:

.navi_kante_unten {
  width:150px;
  height:15px;
  background-image: url(grafiken/grafiken-navi-kante-unten.gif);
  background-repeat:no-repeat;
  padding:0px;
  margin:0px;
  margin-top:10px; 
  font-size:1px;
}

keine Ahnung ob das die beste Lösung ist, aber es scheint zu funktionieren  [IMG]http://www.ayom.com/html/emoticons/biggrin.gif[/IMG]

 

[Tim Blog]

oh ja super, das funktioniert einwandfrei.

vielen Dank, gruß

Tim

 

[Sascha Ahlers]

Der Quelltext ist aber nicht valid, dazu muss ich nicht mal den Validator von W3C benutzen:
HTML <li><a href="http://www.fontpool.de"target="_blank" class="list2">Fontpool</a>


Mit W3C Validator bekomme ich ganze 54 Fehlermeldungen bei der Seite...



MfG Sascha Ahlers