Thingol
Technical User
- Jan 2, 2002
- 169
Hi all,
I have built a menu using css which you can find here. The CSS can be found here.
The menu looks great in Firefox and Opera, and on first sight, even IE seems to render thing correctly. However, when you move the mouse over the menu, you'll notice that the hover state is not displayed correctly in IE, whereas Firefox and Opera are doing things right. I therefore think that my code isn't wrong, but that IE is trying giving doing its best not to go along with web standards. Does anyone have an idea what might be going wrong?
Thanks a lot in advance for any help!
Best regards,
Martijn Senden.
I'll also post the code here:
Menu.htm
Menu.css
In the Beginning there was nothing, which exploded.
--Terry Pratchett, Lords and Ladies--
I have built a menu using css which you can find here. The CSS can be found here.
The menu looks great in Firefox and Opera, and on first sight, even IE seems to render thing correctly. However, when you move the mouse over the menu, you'll notice that the hover state is not displayed correctly in IE, whereas Firefox and Opera are doing things right. I therefore think that my code isn't wrong, but that IE is trying giving doing its best not to go along with web standards. Does anyone have an idea what might be going wrong?
Thanks a lot in advance for any help!
Best regards,
Martijn Senden.
I'll also post the code here:
Menu.htm
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="FW MX 2004 Generic HTML">
<link rel="stylesheet" type="text/css" href="Menu.css">
</head>
<body>
<div id="menuposition">
<ul>
<div id="menutoprechts"><span id="menutoplinks"></span></div>
<li><a href="#" id="current"><span>Welkom</span></a></li>
<li><a href="#"><span>Koor</span></a></li>
<li><a href="#"><span>Concerten</span></a></li>
<li><a href="#"><span>Korenfestivals</span></a></li>
<li><a href="#"><span>Donateurs</span></a></li>
<li><a href="#"><span>Gastenboek</span></a></li>
<div id="menubottomrechts"><span id="menubottomlinks"></span></div>
</ul>
</div>
</body>
</html>Menu.css
Code:
/* CSS Document */
#menuposition {
width:10em;
background:yellow;
font-size:93%;
font-family:Arial, Helvetica, sans-serif;
font-weight:lighter;
line-height:inherit;
}
#menuposition ul {
margin:0;
padding:0;
list-style:none;
}
#menuposition li {
display:inline;
padding:38px 0 0 0;
}
#menuposition a {
display:block;
background:url("Images1024x768/2_Menu/MenuKnopRechtsBoth.gif") no-repeat right top;
margin:0;
padding:0 10px 0 0;
text-decoration: none;
}
#menuposition a span {
display:block;
background:url("Images1024x768/2_Menu/MenuKnopLinksBoth.gif") no-repeat left top;
padding:2px 0 2px 0;
text-align: center;
color: #F1F1E3;
}
#menuposition a:hover, #menuposition a:hover span, #menuposition #current, #menuposition #current span {
background-position:100% -60px;
color: #FFFFF7;
}
#menuposition a:hover span, #menuposition #current span{
background-position:0% -60px;
}
#menutoprechts {
display: block;
height: 1.565em;
background:url("Images1024x768/2_Menu/MenuTopRechts.gif") no-repeat right top;
}
#menutoplinks {
display: block;
height: 1.565em;
background:url("Images1024x768/2_Menu/MenuTopLinks.gif") no-repeat left top;
}
#menubottomrechts {
display: block;
height: 2.086666em;
background:url("Images1024x768/2_Menu/MenuBottomRechts.gif") no-repeat right bottom;
}
#menubottomlinks {
display: block;
height: 2.086666em;
background:url("Images1024x768/2_Menu/MenuBottomLinks.gif") no-repeat left bottom;
}In the Beginning there was nothing, which exploded.
--Terry Pratchett, Lords and Ladies--