Solved

Compatibility problem with IE 7

Posted on 2011-09-26
7
268 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
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 56

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
Independent Software Vendors: 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!

 
LVL 16

Accepted Solution

by:
s8web earned 500 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

756 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