A problem with links in IE [Archive]

DarthNat

08-25-2005, 03:47 PM

I'm trying to create a menu using entirely CSS. An example of what I'm doing is this:

<div class="navborder1">
<img src="./images/graymenuheader.gif" alt="Menu">
<div class="navcell">
<a href="./index.html" class="menulink">Homepage</a>
</div>
<div class="navcell">
<a href="./about.html" class="menulink">About the Show</a>
</div>
<div class="navcell">
<a href="./episodes.html" class="menulink">Episodes</a>
</div>
<div class="navcell">
<a href="./characters.html" class="menulink">Characters</a>
</div>
<div class="navcell">
<a href="./screenshots.html" class="menulink">Screenshots</a>
</div>
</div>

And the part of the stylesheet that runs the menu looks like this:

div.navborder1 { border: solid; border-width: medium;
border-color: #890000; width: 150px; position: relative; top: 10px; left: 0px }

div.navcell { border: solid; border-width: thin; border-color: #890000;
border-left: none; border-right: none; border-bottom: none }

a.menulink:link { color: #E6E6E6; font-weight: bold; background-color:
#000000; font-size: 12px; text-decoration: none; display: block;
padding-top: 2px; padding-left: 2px; padding-bottom: 2px }

a.menulink:visited { color: #E6E6E6; font-weight: bold; background-color:
#000000; font-size: 12px; text-decoration: none; display: block;
padding-top: 2px; padding-left: 2px; padding-bottom: 2px }

a.menulink:hover { color: #000000; font-weight: bold; background-color:
#890000; display: block; padding-top: 2px; padding-left: 2px;
padding-bottom: 2px }

a.menulink:active { color: #E6E6E6; font-weight: bold; background-color:
#000000; font-size: 12px; text-decoration: none; display: block;
padding-top: 2px; padding-left: 2px; padding-bottom: 2px }

The problem is this: the hover does not work properly in IE (it works fine in Firefox and Opera). What I want is for the text color to turn black and the background to light up red behind it. All that happens is that the text turns black, but nothing happens to the background. It seems to be because I have the links displaying as blocks. Is there any way to fix this so that it works or to get the same effect without having the links displayed as blocks?

Fang

08-26-2005, 01:38 AM

Suffering from divitis, classitis and css overkill.
Don't use relative units (medium, thin etc.) for borders. Each browser uses a different value.
This is a list of links, ul would be more semanticly correct.
<style type="text/css">

</style>

</head>
<body>
<div class="navborder1">
<img src="./images/graymenuheader.gif" alt="Menu">
<a href="./index.html">Homepage</a>
<a href="./about.html">About the Show</a>
<a href="./episodes.html">Episodes</a>
<a href="./characters.html">Characters</a>
<a href="./screenshots.html">Screenshots</a>
</div>
</body>
</html>