Solved

CSS menu doing strange things in IE7

Posted on 2012-04-05
7
308 Views
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.

http://bit.ly/HbaLoT

Can anyone help me fix it?
WXPIE6000.jpg
0
Comment
Question by:fox_statton
7 Comments
 
LVL 13

Expert Comment

by:haloexpertsexchange
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
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
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.


Cd&
0
 
LVL 9

Expert Comment

by:alex_code
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.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 9

Expert Comment

by:alex_code
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
0
 

Author Comment

by:fox_statton
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...
0
 
LVL 9

Assisted Solution

by:alex_code
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.
0
 
LVL 53

Accepted Solution

by:
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 />
<![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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

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…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 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

19 Experts available now in Live!

Get 1:1 Help Now