CSS menu doing strange things in IE7

Posted on 2012-04-05
Medium Priority
Last Modified: 2012-06-21
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.


Can anyone help me fix it?
Question by:fox_statton
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 13

Expert Comment

ID: 37812385
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
LVL 53

Expert Comment

ID: 37812694
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.


Expert Comment

ID: 37815658
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.
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Expert Comment

ID: 37815663
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

Author Comment

ID: 37817734
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...

Assisted Solution

Alex earned 800 total points
ID: 37817751
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.
LVL 53

Accepted Solution

COBOLdinosaur earned 1200 total points
ID: 37819696
Here is the list of IE conditional hacks as listed on quirksmode:

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


Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question