Browser Compatibility Issue (Internet Explorer)

I just finished building a site and noticed that on Internet Explorer 7, the navigation is reversed and overlaps the logo.  The site looks fine on all other browsers, including Explorer 8.  Can somebody please let me know how to correct this?  Attached are screen shots of the site on explorer and firefox.  The link to view it live is www.sightdesignz.com/wim

Thanks!
Screen Shot In Firefox (Navigation is Correct)Screen Shot in Explorer 7 (Navigation Issues)
LVL 3
E-DubFrontend Web Developer & Graphic DesignerAsked:
Who is Participating?
 
ienaxxxConnect With a Mentor Commented:
Let's have a look at the css class / inline definition for the logo element....

Try to delete the margin-left property from the class and see if it works for IE (doesn't really matter if with others don't work). Obviously, create a backup of the original css file.
Anyway, in general, try to create a CSS that works with IE 7 without caring about other browsers (while keeping the standard CSS in another file).

At last, when you found the property that causes the problem (or when you defined a definition set that adjust the logo position in IE, when loaded additionally), write a css file with a class definition that overwrites the problematic class.

Then you can use this code:

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="css/iespecific.css" />
<![endif]-->

To load that css file ONLY if the browser is IE earlier than version 8.

This will overwrite just the problematic properties OR load additional definitions to adjust the work for IE 7.


HTH. Bye!
0
 
ienaxxxCommented:
Try adding this doctype string before the html tag

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

This should instruct IE to interpret CSS in another way than the IE standard way. FF and others recognize undeclared doctypes as loose automatically, while IE does not.


HTH
Bye!
0
 
E-DubFrontend Web Developer & Graphic DesignerAuthor Commented:
I added that string only to the index.html page to see if it worked and it didn't.  Could it be anything else?
0
 
E-DubFrontend Web Developer & Graphic DesignerAuthor Commented:
You just taught me a VERY valuable lesson! If I ever have a similar problem, now I'll know how to go about fixing it.  THANK YOU SO MUCH! :D
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.