?
Solved

Compatibility problem with IE 7

Posted on 2011-09-26
7
Medium Priority
?
277 Views
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.
0
Comment
Question by:thebradnetwork
[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
7 Comments
 
LVL 6

Author Comment

by:thebradnetwork
ID: 36601283
The site link is a follows: http://www.opelikaschools.org/carver
0
 
LVL 9

Expert Comment

by:user_n
ID: 36601694
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
 
LVL 58

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
0
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
LVL 16

Accepted Solution

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

#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
 
LVL 16

Expert Comment

by:s8web
ID: 36709254
0
 
LVL 6

Author Closing Comment

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

Expert Comment

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

Featured Post

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

764 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