I am designing a page on a Mac. Looks perfect in all the mac-browsers as well as PC... except for IE 7 on a PC. It appears as though it doubled the left-side margin's. Everything is lined up, just pushed to the right quite a lot. Help?! It works in IE 8, Firefox, Chrome and Safari.

This is a link to the CSS file used.

Thank you for your help!! Matt

4 answers

4
points
This was chosen as the best answer

You can use conditional CSS to isolate the issues with IE7. Here's a link.

What you want to do is isolate the issues in IE7:

<link rel="stylesheet" type="text/css" href="yournormalstyles.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7hacks.css" />
<![endif]-->

And place your modified CSS in ie7hacks.css, a separate stylesheet.

Answered almost 8 years ago by Daryl Claudio
  • Definitely put your IE hacks in a seperate css file! Great tip! Tyler Egeto almost 8 years ago
  • Daryl, I am trying to do the conditional CSS but it's not pulling it for some reason?! It's the same link, and I have added the new CSS file into the CSS folder. Any thoughts? Matt Anderson almost 8 years ago
2
points

You have a number of floated elements with a specified width. This can trigger a doubled margin bug in IE.

The usual workaround in IE6 is to add display:inline; to any div element that is floated and has a declared width.

http://www.positioniseverything.net/explorer/doubled-margin.html

but it probably isn't that in IE7, however you have a whole bunch of validation errors relating to duplicate ID's.

An ID can only be used once in a page. IE7 may just be ignoring the duplicated declarations. I'll take a longer look in the morning, but you might like to fix the main validation errors before looking to the CSS for a problem.

Answered almost 8 years ago by Tony Crockford
1
point

Any element that is floated should have a width. It should also be block, inline elements don't float. the double margin bug in IE is caused by adding a margin on the same side to which you are floating. If you have this:

.floater { float:left; margin-left:10px; width:200px; }

you will get a box 200 pixels wide that floats to the left with a margin of 10 pixels on the left in the well-behaved browsers, but in IE6 you will get a box that is 200 pixels wide, floated to the left, and has a 20 pixel margin on the left. in my experience, the double margin only happens in IE6 (and possibly lower), not IE7. but it doesn't hurt to try fixing the problem by giving IE7 half the margin on those floated elements through a conditional sheet as explained by Daryl Claudio.

if that doesn't help i'd start by revisiting your decision to float everything in that #leftCol container. since, you seem to want them to stack under each other anyway...

Answered almost 8 years ago by jenny ham
1
point

Thank you guys! I will try to implement this as soon as I can. So, any ideas what element is causing the IE float weirdness? I think the conditional CSS would be a good idea but I am still not sure which aspect of the CSS I should change. Thanks for the help!

Answered almost 8 years ago by Matt Anderson