CSS menu doing strange things in IE7

Hi all,
I have this site, and the top menu (green) looks great in most browsers, but in the IE6 and 7 it really looks strange (screenshot attached), with the list breaking down.

http://bit.ly/HbaLoT

Can anyone help me fix it?
WXPIE6000.jpg
fox_stattonAsked:
Who is Participating?
 
COBOLdinosaurCommented:
Here is the list of IE conditional hacks as listed on quirksmode:

<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->

Open in new window


Just stick in the code you need between the if and endif.

However before you do that take a look at your stats to see if there are actually users coming to your site using relic browser. There is no value in doing extra work if you do not have a significant number of users using the old M$ garbage.  Unless you have a lot of users from China; you should not worry about IE6.


Cd&
0
 
haloexpertsexchangeCommented:
OK first things first, using compatibility mode and the developer tools, I got the header to line up correctly by getting rid of the background-image:url(header.gif); WIDTH:800px in the #header css declaration.
I will look into the other problems
0
 
COBOLdinosaurCommented:
A lot of your styling is CSS3, and IE7 does not support most CSS3 so it just makes a guess about how to render.  The bottom line is you cannot use modern code and expect an obsolete browser to render it correctly.


Cd&
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
AlexSoftware EngineerCommented:
So, Where is the problem? The IE always do strange things :-p
So i think this is the regular functionality of IE :-)

Just kidding. IE6? My friend the IE6 is not supported anymore even from the Microsoft. So you don't have care about that. IE7 does not support many features of CSS3.
0
 
AlexSoftware EngineerCommented:
Here is a nice guide with tables about what the IE (all versions) supports and what not. http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx
0
 
fox_stattonAuthor Commented:
Im just wondering if Im better off putting a little bit of code together, so that if its IE6 it uses a simpler style sheet that just shows the menu items, rather than half the items disappearing...
0
 
AlexSoftware EngineerCommented:
Yes you can do that, it's a kind of Technique and it's called usually "Conditional CSS". If browser is IE6 do that if is bla bla bla.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.