✔ height Problem im IE 6

[Moan]

Hola community,

ich sitz gerade mal wieder an einer Homepage und eiegntlich steht soweit alles, nur der IE 6 zickt mal wieder rum- auf den IE7 bin ich ja mal ganz stolz, der macht alles ganz brav

So, zum Thema:

Ich habe als Navigation eine Liste, die links floatet und sich fast über die ganze Seitenbreite erstreckt. Der Platz, der nicht ausgefüllt ist, wird mittels eines rechts floatenden divs gefüllt, welches genau die restliche Breite abdeckt. Ich weiß, dass es eine unschöne Lösung ist, aber ich musste die da noch rechts reinpacken. So, taucht auch ganz gut, außer, dass der IE6 das rechts floatende div genau 2 (oder auch 3) px zu niedrig macht, was sich nicht wirklich schön macht Die Höhe wird mittels height im CSS angegeben.

Hat da einer ne Idee? Vielen Dank schonmal.

Screenshots hängen an!

Dani

 

[Maik]

Hi,

kannst du mal den Quellcode (HTML + CSS) zeigen?

 

[Moan]

Hi Michael,

du wolltest es so

Hier die CSS-Datei

#nav ist die Liste und #iconBar ist des rechte Div

/********NAV*******************/
#nav, #nav ul {
	float: left;
	width: 740px;/*838*/
	list-style: none;
	line-height:27px;
	background: #005EA8;
	font-weight: bold;
	padding: 0;
	margin: 0 0 2em 0;
}

#nav a {
	display: block;
	color: #FFF;
	text-decoration: none;
	padding: 0.25em 1em;
}

#nav a.menuparent {
	background: url(rightarrow2.gif) center right no-repeat;
}

#nav li {
	float: left;
	padding: 0;

}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	w\idth: 13.9em;
	font-weight: normal;
	margin: 0;
	background-color:transparent;
	line-height:2;
	text-align:left;
}

#nav li li {
	padding-right: 1em;
	width: 13em;
	background-color:#999999;
	border-bottom:1px solid #666666;
	filter:alpha(opacity=90); 
	-moz-opacity:0.9; 
	opacity:0.9;
	z-index:1;
	font-weight:bold;
}

#nav li ul a {
	width: 13em;
	w\idth: 9em;
}

#nav li:hover ul ul{
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
	color:#FFF;
}

#nav li:hover, #nav li.sfhover {
	background: #E2001A;
}

#iconBar{
background-color:#005EA8;
width:98px;
float:right;
height:30px;
h\eight:33px;
padding-top:3px;
line-height:27px;
}

Und hier der HTML-Ausschnitt:

<div id="iconBar"><!--###iconBar### begin -->
		
		<a href="fileadmin/templates/main/../../../index.php?id=3"><img src="fileadmin/templates/main/picsNew1/mail.jpg" alt="Treten Sie mit wmb Ventilatoren Kontakt" onmouseover="this.src='fileadmin/templates/main/picsNew1/mailOver.jpg'" onmouseout="this.src='fileadmin/templates/main/picsNew1/mail.jpg'" onfocus="this.blur();" /></a>

		<a href="fileadmin/templates/main/../../../index.php?id=57"><img src="fileadmin/templates/main/picsNew1/katalog.jpg" style="margin-left:5px;" alt="Hier geht's zum wmb Ventilatoren Katalog" onmouseover="this.src='fileadmin/templates/main/picsNew1/katalogOver.jpg'" onmouseout="this.src='fileadmin/templates/main/picsNew1/katalog.jpg'" onfocus="this.blur();" /></a>		
<!--###iconBar### end -->
</div>		

<ul id="nav">
<li><a href="index.php?id=7" onfocus="blurLink(this);">Startseite</a></li>
<li><a href="index.php?id=6" onfocus="blurLink(this);">Das Unternehmen</a>
<ul>
<li><a href="index.php?id=25" onfocus="blurLink(this);">Geschichte</a></li>
<li><a href="index.php?id=24" onfocus="blurLink(this);">Team</a></li>
</ul>
</li>
<li><a href="index.php?id=5" onfocus="blurLink(this);">Produkte</a>
<ul>
<li><a href="index.php?id=54" onfocus="blurLink(this);">Axialventilatoren</a></li>
<li><a href="index.php?id=53" onfocus="blurLink(this);">Radialventilatoren</a></li>
</ul>
</li>
<li><a href="index.php?id=4" onfocus="blurLink(this);">Einsatzgebiete</a></li>
<li><a href="index.php?id=2" onfocus="blurLink(this);">Karriere</a></li>
<li><a href="index.php?id=3" onfocus="blurLink(this);">Kontakt</a>
<ul>
<li><a href="index.php?id=21&amp;no_cache=1" onfocus="blurLink(this);">Kontaktformular</a></li>
<li><a href="index.php?id=55" onfocus="blurLink(this);">Anfahrt</a></li>
</ul>
</li>
</ul>

Danke dir!

Dani

 

[Maik]

Mein Vorschlag: Zeichne die beiden Grafik-Links in einer rechts floatenden Liste aus und formatiere sie auf die selbe Weise, wie die linke Listennavigation.

 

[Moan]

Hola,

um ehrlich zu sein, verstehe ich nicht genau was du meinst. Könntest du mir mit einem Pseudo-Markup kurz nen Tipp geben?

Ich habe mir gerade auch noch gedacht, dass ich rechts einfach noch eine Liste erstelle und darin die Icons platziere. Die Liste genauso formatieren wie die links und dann das div ganz weglassen?! Werde ich morgen mal ausprobieren...

Danke dir

Cheers
Dani

 

[Maik]

Nichts anderes habe ich vorgeschlagen.

 

[Moan]

So der Herr,

vielen Dank für den Tip...funktioniert nun

Dani