rollover effect not working in IE

[beretta]

Hi there, this is my first post.


I've just started building my first real website. I discovered a cool link rollover effect using css and a <span>, where a box of text appears when you hover over the link. I created it on my page, and sure enough it worked great.

Then I tried opening it in IE6. Dang, the effect didn't appear at all. I couldn't figure out what the problem was, so I went back to the page where I learned about it, and viewed THAT page in IE6 and guess what? It showed up fine on his site! The page I saw it on is meyerweb.com/eric/css/edge/popups/demo.html - it works fine for him.

My page is temporaily located at http://beretta.orcon.net.nz/index.html

The css for that page is here: http://beretta.orcon.net.nz/index.css

I've scrutinised my css and compared it with his (his isn't a separate doc, it's in the header), and I just cannot see how I'm doing anything different, but his rollover effect works in firefox and IE6, and mine only works in firefox.

Can anyone see what might be causing the problem?

[_Aerospace_Eng_]

For some reason IE seems to play when a 1px border is added to the links. Put this before the div#links a span CSS
div#links a {color: #000; background: #002951;
border-right: 1px solid #002951;}
div#links a:hover {color: #000; background: #002951;
border-right: 1px solid #002951;}

[beretta]

OK, I've changed the css and added that border. It still won't display in IE6 though. I've uploaded the new css. Is that what you meant?

Thanks for helping with this.

[_Aerospace_Eng_]

Change this
div#links a:hover {color: #000; background: #002951;
border-right: 1px solid #002951;}
to this
div#links a:hover {color: #000; background: #002951;
border-right: 1px double #002951;}
I'm not sure why this works. I'm not sure why a lot of these things happen in IE. Its so buggy that sometimes the strangest things make it "not buggy"

[beretta]

LOL! OK now that's just freaky.

Thanks so much for that.