1
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
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;
}