Compatibility problem with IE 7

Posted on 2011-09-26
Medium Priority
Last Modified: 2012-05-12
I am working on a website that I have a spacing problem with the logo. The problem doesn't occur unless I am viewing it in IE7. All other version fo IE are fine. What can I do to fix this.

P.S. I do understand that upgrading would fix the problem but considering some users still use IE7 i need it to work in it as well.
Question by:thebradnetwork

Author Comment

ID: 36601283
The site link is a follows: http://www.opelikaschools.org/carver

Expert Comment

ID: 36601694
It seams that heitht for some reason doesn't work
#header {
    height: 200px;
    position: relative;
    width: 940px;

LVL 62

Expert Comment

by:Julian Hansen
ID: 36601800
I don't have access to IE7 so can't see the problem but there are a couple of problems visible off the bat

1. the #load style specifies a height of 121px when the logo height is actually 202px
2. The logo is enclosed in <p></p> tags - which have different margin values on different browsers

So remove the <p> tags - replace them with divs if you need a block container
Then fix your style to make the logo box fit the height of the logo
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

LVL 16

Accepted Solution

s8web earned 2000 total points
ID: 36709230
<link rel="stylesheet" type="text/css" href="/carver/templates/awesomeness/css/content-narrow.css" /> is in the body, not the head. This might not be causing your problem, but I've seen stranger things happen.

IE7 is horribly non-compliant with standards. Trying to wrap your head around why things are different in IE6 and 7 is like trying to make sense of crazy.

There are two quick and easy fixes. You could use the # hack to target IE7. Here's an example:

     margin:0; /*targets all browsers*/
     #margin:5px /*Would override for IE7*/

For more on css hacks -

Some people will argue that this is not clean markup. The more "acceptable" method is to link a separate stylesheet for IE7 with a conditional comment.


My take is - unless you have a bunch of rules that you need to override, a conditional stylesheet is overkill and more cumbersome to maintain.
LVL 16

Expert Comment

ID: 36709254

Author Closing Comment

ID: 36710136
Four words...I hate Internet Explorer. I put an if statment in there and it worked like a charm.
LVL 16

Expert Comment

ID: 36710496
I say that no less than ten times a day. I'm glad you got it sorted.

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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.

Join & Write a Comment

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

607 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