CODEWITHSUNDEEP
cssdebugginginternet-explorer-7
Oliver Gibson
Oliver Gibson

Reputation: 39

Why is my CSS not displaying correctly on IE7? Everything else is working OK

I've spent most of today trying to work out why the css on my site isn't working correctly in IE7. You can see the site at http://www.ecocamel.com

When you land on the product scroller page with the shower heads. .. everything is a mess, with mouseover popups partly showing without any mouseover, and products flowing out of the container to the right..

I tried adding overflow:hidden, and position:relative, which did fix quite a lot of it.. but it then caused the website to chop off part of the left / right arrows on other browsers...

SO I've removed everything for now. Just infuriating that it works perfectly on every other browser. How can I work out the best way of fixing it without impacting other browsers? I guess I can add the overflow:hidden / postion:relative stuff with a conditional IE7 statement so it doesn't impact other browsers.. but that still doesn't resolve things properly.

Upvotes: 0

Views: 509

Answers (3)

Ryan Hollingsworth
Ryan Hollingsworth

Reputation: 381

Google "conditional css for IE" and you'll find a plethora of tutorials showing you how to create conditional CSS for only IE version x+ or specifically ie7.. even all browsers but IE. Most websites require some, if not a ton of IE tweaking. Also, look in to a reset.css to set all margins and paddings to 0 to help with consistency.

Upvotes: 0

pwavg
pwavg

Reputation: 295

A good method is to use conditional comments.
You could use:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="ie6"> <![endif]-->
<!--[if IE 7]>         <html class="ie7"> <![endif]-->
<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html>         <!--<![endif]-->

In this cases extra classes are put on the html tag for you to style explicit for IE6/7/8

Like:

div {color:#ff00ff}
.ie7 div {color:#00ff00;}

Upvotes: 1

mickburkejnr
mickburkejnr

Reputation: 3690

In the case of using conditional IE7 statements, while it seems a crap way to do it, if that is the only alternative without re-writing your CSS then that is the best solution.

As GordonM has mentioned, it's hard for us to know what's going on without seeing the code. But as you're using position:relative, I may suggest trying to use z-index so that the popup's display on top of everything (like they should do).

As well as this, have you followed the CSS box model correctly? What I tend to do is write these basic statements when I create a div or p tag:

    div {
      float:left;
      width:100%;
      margin:10px;
}

This is cross browser compliant, as I used to work for an agency who wanted their websites to use just one CSS file for all browsers. It is possible to build a web page with HTML and CSS and make it work on every single browser (excluding IE6) without the use of conditional statements. But as I think you've come/coming to the end of development, you aren't in a position to re-write your CSS completely. So try the z-index idea first, then try applying the above code to any affected div.

Upvotes: 0

Related Questions