CSS menu doing strange things in IE7

Posted on 2012-04-05
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
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.
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline


Expert Comment

ID: 37815663
Here is a nice guide with tables about what the IE (all versions) supports and what not.

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_code earned 200 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 300 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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

759 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now