CSS tab roll over problem in IE6

[moesian]

Hi,

I'm putting together a blog, Ive finally got the appearance fine across the browsers Im testing on (firefoe, IE6 and IE7).

However I have a tabbed navigation along the top which does not become selectable when rolled over in IE6, also any links in the content section aren't selectable either.

<snip>

Any help would be much appriciated this is my first real attempt at CSS and it has been a struggle getting this far, I only need to get past this problem and I should hopefully finally be finish.

Thanks alot

[edited by: Robin_reala at 6:28 pm (utc) on April 26, 2007]
[edit reason] Removing URL as per TOS #13 [webmasterworld.com] [/edit]

[moesian]

Hi again,

Sorry about posting the url, didn't realise it wasn't allowed. It seems the problem could be something to do with a png fix java script Ive been using. The site functions fine without it but looks terrible, has anyone else experienced something similar.

[Dabrowski]

Hi mate, I found the same thing when I had linked rollovers. The link will actually work though the transparent bits. I'm assuming you have code like this:

<a href='page.html'><img src='mying.png'></a>

Well, if the A has no position set, then the img won't work, actually it's displayed on top of the link, so the link is effectively hidden.

To fix it, use A { position: relative; } in your CSS and make sure that IMG has no position set.

[Dabrowski]

ok, read your email, looked at your code.

You have:

#home {
...
background: url(img/home.png);
...
}

<div id='home'><a href='...'>Text</a></div>

If you add:

#home A { position: relative; }

That should fix it.

Incidentally, nice way of hiding text, I'll remember that one!

[moesian]

Thanks again for your help Dabrowski, worked like a charm.