CSS Rollovers - Webmaster Forum - Web Design, Programming and SEO forums

03-04-2007, 02:00 PM

Katy

Status: Junior Member
Join date: Jan 2007
Location: Finland
Expertise:
Software:

Posts: 40

iTrader: 0 / 0%

Katy is on a distinguished road

CSS Rollovers

I have a CSS rollover menu and it works great in Firefox, but not in IE. When I hover over the buttons they look ugly and the background disappers for a few seconds and all other links turn white. I tried fixing it by adding

* html .nav a:hover {
visibility: visible;}

but that only fixed the font.

Here's my CSS:

Code:

.nav a {
display: block;
width: 188px;
background: inherit;
background-image: url(images/link.jpg);
padding: 11px 0px 11px 0px;
text-indent: 17px;
text-decoration: none;
text-transform: capitalize;
font: bold 9pt Verdana, arial;
color: #CCCCCC;}

.nav a:hover {
background: inherit;
background-image: url(images/hover.jpg);
color: #FFFFFF;}

* html .nav a:hover {
visibility: visible;}

And HTML:

HTML Code:

<div class="nav">

<a href="#">&raquo; Link goes here</a>
<a href="#">&raquo; Link goes here</a>
<a href="#">&raquo; Link goes here</a>
<a href="#">&raquo; Link goes here</a>

</div>

I can't use javascript, cos it requires to put my buttons directly on the page, but I have them all as backgrounds...

So, is there anything I can do to fix this, or is IE hopeless?

Hope someone can help!