Zur Navigation

IE 6 zeigt Menü doppelt hoch an

1 uwe

Hallo,
ich habe eine Menue das im IE7 und Firefox richtig angezeigt wird.
Nur bei IE 6 und IE 5.5 wird der Abstand zwischen den Menupunkten (doppel) so hoch angezeigt.

Der CSS Code ist valide.

Zwischen dem "Trenner" und dem nächsten Menupunkt ist es ok.
Aber zwischen den jeweiligen Menupunkten ist der Abstand viel zu groß.

Gruss
Uwe

Der komplette html Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Layout
24</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><meta name="test" content="test"><style type="text/css">
@import url(menu.css);
html,body{margin:0;padding:0}
body{
font-size:100.1%;
padding:7px;
font-family: Helvetica,Arial,sans-serif;
background-image: url(Background.JPG);
}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header2 {
background:lavender;
height:50px;
border-top:0 solid darkblue;
border-right:0 solid darkblue;
border-left:0 solid darkblue;
text-align:center;
vertical-align: middle;
margin: 15px auto;
width: 200px;
/*
margin-left: 0.8em;
margin-right: 0.8em;
*/
}
div#content p{line-height:1.4}
/*
div#navigation{background:#B9CAFF
} */
div#extra1{background: green}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:right;width:100%;margin-left:-220px}
div#content{margin-left:240px;
text-align:left;
clear:none;
color:black; background:#F8F8FF;
border-width:3px; border-style:solid; border-color: white #999 #999 white;
border-top-width:3px; border-bottom-width:3px;
}
div#content2{margin-left:240px;
margin-top: 15px;
clear:none;
color:black; background:#F8F8FF;
border-width:3px; border-style:solid; border-color: white #999 #999 white;
border-top-width:3px; border-bottom-width:3px;
}
div#kopfnavigation{float:left;width:220px}
div#navigation{float:left; width:220px}
div#extra{float:left;clear:left;width:220px}
div#extra1{float:left;clear:left;width:220px}
div#footer{clear:both;width:100%}
#header {
margin: 0pt auto; width: 947px; height: 128px; background-image: url(Wolken.JPG);
margin-bottom: 19px;
}
div#headerkltext {
margin-left: 15px; font-size:80%;
}
div#headerbild {
float: right; width: 91px;
margin-right: 40px;
margin-top: 20px;
}
div#headerbild3 {
left: 823px; width: 91px; height: 85px; margin-top: -50px;
}
#bild1 { width: 34px; height: 34px;
padding-left: 5px;
}
html>body #header {
height:128px;
}
</style></head>
<body>
<div><div id="header"><div id="headerkltext"> test<span><img id="bild1" src="bild13.gif" alt=""></span><div id="headerbild"><br><div id="headerbild3"><img alt='Urlaub an der Nordsee' src='slides/bild2.gif'></div><br></div></div><br></div><div id="header2">kopf</div>
<div id="wrapper"><div id="content"><p>1)
Content here. column long long
make silly long column long make very </p>
</div><div id="content2">Content2 here. </div>
</div><div id="navigation"><div id="menuebox"><ul> 
<li class='menuekopf' title='Info'> Info </li> 
 <li class='menuekopf' title='Info'> Info </li>  
<li class='menuekopf' title='Info'> Info  </li>  
<li><a title='Info' href='index.html'  class='normal'> Start</a></li> 
 <li ><a title='Info' href='index.php'  class='untermenue'>» Info</a></li>  
<li ><a title='Info' href='index.html'  class='untermenue'>» starting side</a>
</li>  <li><a title='Bildergalerie' href='lerie.html'  class='normal'> Bildergalerie</a></li> 
 <li class='trenner' title='Bilder'> Wohnung </li> 
 <li><a title='Impressum' href='Link.html'  class='normal'> Impressum</a></li> </ul> 
 </div></div><div id="extra1"><p>2)
More
stuff here. very text
</p></div><div id="extra"><p>3)
More
stuff here. very text
make long  </p>
</div><div id="footer"><p>Here it goes the
footer</p></div>
</div></body></html>


/* - - - - - - - - - - - - - - - - - - - - */
/* MENUE CSS */
/* - - - - - - - - - - - - - - - - - - - - */
#menuebox {
width: 220px;
margin: 0;
padding: 1px;
font-size: 1.1em;
color: #000000;

}
#menuebox ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#menuebox li {
margin: 0;
padding: 0;
text-align: left;

}
#menuebox li.trenner {
background-color: #babad4;
padding: 4px;
margin: 1px;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
#menuebox a {
display: block;
background-color: #D3D3D3;
color: #990000;
padding: 3px 6px 3px 6px;
padding-left: 15px;
margin: 1px;
width: auto;
font-size: 1em;
text-decoration: none;

}
#menuebox a:hover {

background: url(pfeil2r.gif) no-repeat right center ;
background-color: #e9eaa3;

}
#subnav a:hover { background: url(pfeil2r.gif) no-repeat right center ;
background-color: #e9eaa3;
color: #000000;
padding-left: 15px;

}


#menuebox a.normal {


border-left: 12px groove #999933;
border-right: 4px solid #babad4;

}
#menuebox a.current {
background-color: #ffcc00;
color: #000000;
border-left: 4px solid #495398;
border-right: 4px solid #495398;
}
#menuebox a.untermenue {
border-left: 12px groove #999933;
border-right: 4px solid #babad4;
padding-left: 25px;
margin-left: 15px;
}
#menuebox li.menuekopf {
color: #990000;
font-size: 0.8em;
background-color: #495398;
color: #ffffff;
text-align: center;
}

12.02.2009 19:51

2 Jörg

Das ist wohl ein Bug des IE6. Wenn du 'nen Rahmen drum ziehst, verschwindet der Abstand:

#menuebox li {
margin: 0;
padding: 0;
text-align: left;
border:1px solid white;
}

12.02.2009 20:26

3 uwe (Gast)

Danke Jörg,
kleiner Bug, aber sehr inangehme Wirkung.
Gruss Uwe

12.02.2009 20:59

4 Rudy

Kommt mir bekannt vor - ich glaube das löst sich auch, wenn Du a auf inline-block anstatt auf block setzt.

12.02.2009 22:21

5 Uwe (Gast)

Hallo Rudi,
danke, habe ich gleich ausprobiert.
Jetzt ist es richtig untereinander, aber die Breite von dem jeweiligem Rahmen ist nur noch so breit wie der Text.
Die fest einstellte Breite ist weg.

Gruss Uwe

12.02.2009 22:33

6 Rudy

Du musst a, wenn es inline-block ist, auch eine width geben. Es ist sonst immer nur so breit wie der Inhalt, nicht wie bei block, wo es die gesamte verfügbare Breite einnimmt. Aber im Gegensatz zu inline (was das Standard-Display von a-Elementen ist) bewirkt die Angabe von width/height etwas. Zur Kompatibilität mit Firefox 2 sollte die Deklaration display:-moz-inline-box inline-block; sein. Am besten wäre aber mE die IE-Korrekturen nur im IE-CSS einzufügen, welches per Conditional Comments eingebunden wird, dann brauchst Du -moz-inline-box natürlich nicht.

12.02.2009 22:40 | geändert: 12.02.2009 22:41

7 Uwe (Gast)

Danke Rudi.
Gruss
Uwe

12.02.2009 22:46

8 Rudy

Da es mir heute wieder untergekommen ist, bin ich auf eine "schönere" Lösung gestoßen.

#menuebox li,
#menuebox li a {
 zoom:1;
}

14.04.2009 10:24

9 Uwe (Gast)

Hallo Rudy,
werde ich mir heute Abend mal ansehen.

Gruss
Uwe

14.04.2009 12:07

Beitrag schreiben (als Gast)





[BBCode-Hilfe]