Mildly complex issue with IE6/IE7 and negative margins. Possible fix. [#689724]

In layout.css, #content has a margin of -100%. Consequently, any bordering or background color/image for the child div with ID #content-inner will display across the whole width of the page behind, at least, #sidebar-left even though its own child divs (such as #content-top and #content-area) will display correctly. Essentially #content-inner's own margin is ignored for the purposes of styling the div. I couldn't work around this with a quick attempt at nesting alternate divs either for whatever reason.

http://haslayout.net/css/Negative-Margin-Bug has a couple of possible answers and my site is fixed but more experienced eyes than mine may be able to pick fault so I won't say this is fixed for all ;o)

Comments

Comment #1

UrbanFuturistic commented 20 January 2010 at 10:48

Title:

Mildly complex issue with IE7 and negative margins. Possible fix.

» Mildly complex issue with IE6/IE7 and negative margins. Possible fix.

Sorry, forgot to say this is a bug in IE6 as well (still Microsoft's bug).

After a bit of fiddling it might also be worth mentioning for those new to this theme that a line needs to be uncommented in the subtheme's info file before ie.css will be used so if it's not having any effect look there before doing anything else.

Comment #2

mrj0909 commented 7 June 2010 at 14:23

Let's say we want our content to be moved left by -10 pixels, and have code such as this:

<div>

<div style="margin-left:-10px;">

contents for inner div
</div>
</div>

In most browsers this will render correctly, however in IE 6 and 7 the left 10 pixels will get cut off. To fix that, change the code accordingly:

<div style="width:100%;">

<div style="margin-left:-10px;position: relative;zoom:1">

contents for inner div
</div>
</div>

The width doesn't have to be 100%, but it does have to be defined.

I hope yo will be happy after this.