• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 288
  • Last Modified:

Compatibility problem with IE 7

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.
0
thebradnetwork
Asked:
thebradnetwork
1 Solution
 
thebradnetworkAuthor Commented:
The site link is a follows: http://www.opelikaschools.org/carver
0
 
user_nCommented:
It seams that heitht for some reason doesn't work
#header {
    height: 200px;
    position: relative;
    width: 940px;
}

http://www.positioniseverything.net/articles/ie7-dehacker.html
0
 
Julian HansenCommented:
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
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
s8webCommented:
<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:

#somediv{
     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.

http://www.quirksmode.org/css/condcom.html 

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.
0
 
s8webCommented:
0
 
thebradnetworkAuthor Commented:
Four words...I hate Internet Explorer. I put an if statment in there and it worked like a charm.
0
 
s8webCommented:
I say that no less than ten times a day. I'm glad you got it sorted.
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.

Join & Write a Comment

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.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now