[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 285
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

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!

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