Forum Moderators: not2easy
Could you look at
<snip>
in both FF and IE Can you tell me why the Example 1 is not showing properly in IE but is fine in FF?
This is happening to quite a lot of menus I try and as I'm only learning CSS I can't fathom why
Any suggestions?
Any help would be very much appreciated.
Dara
[edited by: engine at 3:22 pm (utc) on April 28, 2008]
[edit reason] Please post code, not urls, thanks. [/edit]
Here we work with code directly. It's stricter then other forums but it's a happy medium.
Lots of things don't work in IE. Are these drop-down menus that use the :hover pseudo-element? If so they will work in IE7 not but IE6. This is the most common IE/Menu issue I encounter people dealing with. If that is the case you'll most likely have to dabble with some JavaScript but I won't get too far ahead of myself.
Any way you'll find lots of stuff doesn't work in IE.
A few tips...
1.) Does your (X)HTML and CSS validate?
Validate your (X)HTML code here...
[validator.w3.org...]
Validate your CSS code here...
[jigsaw.w3.org...]
(non-personal links are allowed, check the posting guidelines to see what is accepted here and what isn't).
2.) Are you testing in multiple browsers? You should be! I test with over forty versions of numerous browsers...you could say I'm enthusiastic and/or insane. ;) Of course I recommend testing in...
Firefox - Uses Gecko rendering engine, best reference for correct behavior.
Opera - It's rendering engine's name keeps changing so most people just refer to it as Opera.
Safari - Safari uses the Webkit rendering engine.
Different rendering engines sometimes render the exact same code differently. Firefox, Opera, and Safari usually render exactly the same or usually very closely and are very standards compliant.
Internet Explorer...well IE8 is looking promising but that isn't what people are using.
While this may not resolve the :hover scenario if that is what you're dealing with the following bit of advice will save you massive headaches in the future...
Internet Explorer's CSS handling is just plain goofy. Thankfully with CSS you can overwrite your first style sheet with a second and the big secret you'll want in on, conditional comments [msdn2.microsoft.com].
Example for IE7
<link href="style.css media="screen" rel="stylesheet" title="Classic Theme" type="text/css" />
<!--[if IE]><link href="themes/classic/style-patch-ieccss7.css" media="screen" rel="stylesheet" title="Classic Theme" type="text/css" /><![endif]-->
Step 1.) Test in the other three browsers without worrying about IE.
Step 2.) Add a second style sheet for the version of IE you wish to fix bugs in.
Step 3.) Depending on how far you want to take IE's support it helps to cut corners. IE 5.0, 5.5, and 6.0 can pretty much share the exact same style sheet. You can serve a separate style sheet for IE7.
When you change things you only need to override what is broken...no need to mass-copy stuff. If you don't care to become intimately acknowledged about IE bugs just tinkering with things like margins, width, etc will help you out.
If it's the :hover issue you can also use conditional comments to include a JavaScript script element to include JavaScript specific to this issue.
Oh the big kicker I forgot to mention: conditional comments use standards compliant (X)HTML comments. They are ignored by all other browsers. So long as it's served after (below) your main style sheet your conditional comments style sheet will override the standards one though only with any different values you choose.
Any way I digress, you'll want to post your code here. Since it's IE you'll also want to let us know what version of IE you're testing with.
- John
