PDA

Click to See Complete Forum and Search --> : CSS Menu & IE7

Znupi
03-13-2007, 03:48 PM
So I was messing around with my free time and made this nice css menu (http://www.dc-hub-hosting.com/znupi/cssmenu.html), and actually hoped that it would work on IE7. It works so nice in Firefox, but like always, IE, no matter what version, comes and screwes everything up :(. Any ideas how to fix it so it works on IE7, too?... Or maybe a link to a tutorial that explains how to make a better CSS Menu, that maybe works on IE7, too? I made this one remembering an article from alistapart. That tutorial used "left: 150px" instead of "margin-left: 143px", which makes it work in IE7, yes, but it's not so flexible. For example if I want to put the menu on a page that is flexible, so elements move if the page is resized, using the left attribute, it will screw everything up, but by using margin, it works... well, in Firefox :rolleyes:
WebJoel
03-13-2007, 06:48 PM
I don't have IE7, but you do need to have a complete !doctype to get anything to work properly in IE.

"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">"

Isn't enough. You need one with a URL:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Znupi
03-14-2007, 05:42 AM
Thanks WebJoel but that makes no difference.
The Old Sarge
03-14-2007, 11:19 AM
Have you tried this (http://www.bbd.com/stylin/sections/chapter7.htm)?
Siddan
03-15-2007, 07:35 AM
As I understand it. IE cannot have any other elements but A to be hovered.
So basically IE do not understand li:hover, but only a:hover.

I have seen a htc hack somewhere which would allow IE to understand li:hover
WebJoel
03-15-2007, 09:57 AM
IE fails to understand pseudo-class on anything other than a link. These <li>s are not links, they are text. Wrap each <li>'s "text" in a "<a href="url"></a>" and they will probably work: see screenshot
The Old Sarge
03-15-2007, 01:37 PM
IE will recognize "hover" if you include the "fix" in the link I posted earlier.
Znupi
03-15-2007, 02:39 PM
IE will recognize "hover" if you include the "fix" in the link I posted earlier.
IE 7 recognizes "hover" on anything, not only <a>'s. Of course, only if you use a strict doctype :rolleyes:

Oh, and thanks Sarge for the link! :)
Dnim74
03-19-2007, 07:00 PM
I don't have IE7, but you do need to have a complete !doctype to get anything to work properly in IE.

"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">"

Isn't enough. You need one with a URL:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


I was having the same problem and I found this thread. I followed WebJoel's advice here and it fixed my problem. Thanks!!
-D