I am designing a web page and I am having problems with a hover effect in IE6. The page is located at http://www.backontrack.nu/egusin/layout.php and if you hover over the menu items using Firefox (or any other real browser) you will see the hover effect. If you try doing this in IE6 there won't be any hover. Is there some obvious way of fixing this that I'm missing?
Another thing, I would like to center the page. I can do this by adding margin: 0 auto; to the container class but this doesn't work in IE6. I know I could do the centering with a wrapper and some negative margins but I'd rather avoid that if at all possible. The odd thing someone at http://www.xs4all.nl/~peterned/examples/csslayout1.html is using the technique I tried for centering and it seems to work for him, even in IE6.
Thanks in advance!
show us the code and...
if you post the code it will get fixed .. if you dont .. well ..
The OP has given us a link
The OP has given us a link to the code, which is much better than posting it here, because anyone with a modern browser can see all the html and all the css with that.
The code has an XML declaration before the Doctype declaration. This puts IE6 or less in quirks mode where it renders box sizes wrong. So to start with, drop that. The Doctype declaration must be on the very first line of the file with nothing before it, not even a space or an empty line.
The other issues raised by the OP have all been dealt with many times on this forum, so the OP should browse the forum sticky messages, the "howto" forum and, failing that, learn to use the site's search function.
dont see the issues
i dont use IE6 .. i cant see an issue with the page
Thank you for your reply. I
Thank you for your reply. I was able to center the page properly by dropping the XML declaration.
I followed your second advice and it seems i'm supposed to use http://www.xs4all.nl/~peterned/htc/csshover.htc to make hovering on anything else than links to work. Is this really the only way?
I implemented the hovering
I implemented the hovering by using http://www.xs4all.nl/~peterned/htc/csshover.htc. It does work in IE6 now but the area that activates the hovering is not at all the same as in IE7 or FF2.
I guess a lot of the problems come from the fact that I've nestled a div inside the li so that I can create the hover effect on both sides of the actual link (this way I can have differently wide links with a hover effect that adjusts it self to the width of the link). I think part of the problem comes from the div not being the same height as li but when I specify the height for the div the menu gets completely broken. I've tried using a SPAN instead of the div but that didn't help either.
Do you have any suggestion on how I would go about to eliminate the hovering differences? Thanks.