View Full Version : IE7 negative margin pushes container area

07-13-2011, 09:48 PM
I have created a dynamic layout that works great. Of course in everything but IE7. Here is what I am trying to accomplish. Picture 2 divs. One contains another one that has a negative top margin. The content goes in the negative margin. No heights are assigned to each.

| div y content |
| |
| div x |

Okay, so like that (bad drawing, I know) where div y has a negative top margin. In IE7, if you have div y as a background of white and div x as a background of black, for all of the content you place in Y, it pushes div x down, creating more "black" space.

I am trying to eliminate all of that extra pushing down. It shows greatly on the site I am working on. Here is a picture / example
note: that flame is a transparent, absolute layer and should be on top.

Here is the url: www.scorpionwear.com/hdwp

I have checked the bugs for IE7 and can't seem to find or fix this one. PLEASE anybody help if you can

07-14-2011, 09:21 AM
You have got some divitis (http://csscreator.com/divitis) and the way you've made the column layout is not good, I'd say(since you need to support IE7). Check http://www.quirksmode.org/css/display.html#t03

I'd recommend you to have a look at http://bonrouge.com/2c-hf-fixed.php to see how to make good 2 column layout.

07-14-2011, 05:22 PM
Thanks for pointing out some coding flaws. I used inline-block with the IE7 fix appended to it, so it is compatible. I know I should have wrote the code cleaner.

Even if it was all cleaned up, I still don't have an answer to the original question. It works perfectly in other browsers. It uses a graphic for the top and when the content gets enough height, it runs into the repeating background image of the #content div. Pretty slick, but IE7 doesn't like it.

07-15-2011, 05:18 PM
It looks like you can't make out-of-the-box dynamic layouts with IE7. :(
I'll just have to create an entire separate stylesheet and lay it out as one gigantic background image.