I made a navbar where the buttons light up when the user moves over
them. The only problem was in IE the buttons only light up when
hovering over the text.
This was not a problem in opera!
HOWEVER!
When I positioned my navbar directly at the top of the page it works
fine even in IE!
Moving the navbar down about double the height of the font being used
and then it stops working only highling the buttons when over the
text, weird no?
Here is the code, this works now in IE but if you change the top
offset of sitenav to more than double the font size the buttons no
longer light up properly, try it and see for yourself!!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
div#sitenav{
position: absolute;
top: 0px;
left: 0;
width: 12.5%;
font-size: 15px;
background-color:white;
border: 1px solid black;
}
div#sitenav a{
display: block;
padding: 4px 8px;
margin: 0;
text-decoration: none;
text-align: right;
border-top: 1px solid gray;
}
div#sitenav a:hover {
background: #fb9;
}
div#sitenav h4{
background: rgb(33%,33%,33%);
color: white;
text-align: center;
margin: 0;
padding: 0.25em 0 0.125em 0;
}
</style>
</head>
<body>
<div id="sitenav">
<h4>our web site</h4>
<a href="#">home</a>
<a href="#">products</a>
<a href="#">services</a>
<a href="#">map</a>
<a href="#">help</a>
<a href="#">contacts</a>
</div>
</body>
</html>
