xthetronx
Erfahrenes Mitglied
Hallo zusammen,
ich habe ein Menu, welches mit CSS formatiert wird und auch soweit im Firefox richtig angezeigt wird.
Im IE aber leider nicht und ich habe nicht herausfinden können, woran es liegt.
Eine Vermutung ist, dass der IE das "float" bei der Navigation nicht akzeptiert, denn er drückt den "div#content" nach unten, was im Firefox nicht der Fall ist.
Ich habe noch einen Screenshot mit beigefügt, damit ihr besser sehen könnt, was gemeint ist.
Vielen Dank für eure Hilfe
Html
CSS
ich habe ein Menu, welches mit CSS formatiert wird und auch soweit im Firefox richtig angezeigt wird.
Im IE aber leider nicht und ich habe nicht herausfinden können, woran es liegt.
Eine Vermutung ist, dass der IE das "float" bei der Navigation nicht akzeptiert, denn er drückt den "div#content" nach unten, was im Firefox nicht der Fall ist.
Ich habe noch einen Screenshot mit beigefügt, damit ihr besser sehen könnt, was gemeint ist.
Vielen Dank für eure Hilfe
Html
HTML:
<body>
<div id="container">
<!-- Header -->
<div id="header">
<div id="headerlinks"><img src="./images/logo.gif"></img></div>
<div id="headerrechts"></div>
</div>
<!-- Navigation -->
<div id="navigation">
<ul class="glossymenu">
<li><a href="#" >Home</a></li>
<li><a href="#" >Produkte</a></li>
<li><a href="#">Unternehmen</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Ersatzteile</a></li>
<li><a href="#" style="border-bottom-width: 0">Kontakt</a></li>
</ul>
</div>
<!-- Content -->
<div id="content">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
</div>
</div>
</body>
</html>CSS
HTML:
body {
background-color: #ffffff;
margin-top: 30px;
}
div#container {
width: 960px;
margin: 0 auto;
background: url(./images/background/main.gif);
}
div#header {
width: 960px;
height: 120px;
}
div#headerlinks {
width: 180px;
height: 120px;
margin-right: 10px;
background-color: #3366cc;
float: left;
text-align:center;
}
div#headerrechts {
width: 770px;
height: 120px;
background-color: #3366cc;
float: left;
}
div#navigation {
width: 180px;
margin-right: 10px;
float: left;
border-top: 10px solid #ffffff;
z-index:1;
}
div#content {
width: 750px;
padding: 0 10px 0 10px;
float: right;
border-top: 10px solid #ffffff;
z-index:10;
}
div#footer {
width: 960px;
clear: both;
}
div#footerlinks {
width: 180px;
height: 24px;
background-color: #999999;
border-top: 10px solid #ffffff;
margin-right: 10px;
float: left;
}
div#footerrechts {
width: 770px;
height: 20px;
padding: 2px 0 2px 0;
background-color: #3366cc;
border-top: 10px solid #ffffff;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
text-align:center;
}
.glossymenu{
list-style-type: none;
padding: 0;
padding-top:0;
width: 180px;
line-height:20px;
border-bottom:2px solid #ffffff;
}
.glossymenu li a{
background: white url(images/hintergrund_2.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
padding:5px 0 5px 5px;
color: white;
display: block;
text-decoration: none;
}
* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(images/hintergrund_1.gif);
color:#ffffff;
}
