Solved

Browser Compatibility Issue (Internet Explorer)

Posted on 2011-09-26
4
239 Views
Last Modified: 2012-05-12
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)
0
Comment
Question by:E-Dub
[X]
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
  • 2
  • 2
4 Comments
 
LVL 10

Expert Comment

by:ienaxxx
ID: 36600035
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
 
LVL 1

Author Comment

by:E-Dub
ID: 36600112
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
 
LVL 10

Accepted Solution

by:
ienaxxx earned 500 total points
ID: 36600161
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
 
LVL 1

Author Closing Comment

by:E-Dub
ID: 36601205
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

Featured Post

Technology Partners: 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!

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

710 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