Weird Margin Issue in All Versions of IE (Including 9) – Negative Margins?

[Jeremy Englert]

http://www.goo.gl/tpL04

You can see the difference here:
http://img534.imageshack.us/img534/8269/screenshot20120813at557.png

Any ideas? A negative margin is being used to pull the image “up” – I’m thinking that may have something to do with it? The problem only occurs in IE (of course).

[Senff]

Don’t be too quick to blame IE….in my opinion, it’s the fact that the code is quite, quite messy.

For example, having your “aptSearch” ASIDE block positioned relative as well as float left and then also moved down 65 pixels, doesn’t make much sense. Because it’s floated, it is removed from the document flow so the wrapping div (the one with the 1000px width) will get a height of 0.

Giving the next div (slider) a top margin of -80 will then position it 80 pixels above the bottom of the 0 height div, which is at the top of the page. But IE is smart enough (yep, SMART enough!) to see that’s not where it should be, because the 0 height wrapping div is most likely not supposed to be 0 in the first place.

If this confuses you (it DOES confuse me somewhat), it’s really because the way it’s coded is so confusing to start with. The negative margins and relative positionings with additional top positions are hacks at best, and really not the way how this page should be coded. Not trying to blast your code in any way, but if I had to do this, I’d personally take a completely different approach. It may be worth to take a step back and clean it up a little. Or, if you have some time, start from scratch.

[wolfcry911]

Giving the next div (slider) a top margin of -80 will then position it 80 pixels above the bottom of the 0 height div, which is at the top of the page. But IE is smart enough (yep, SMART enough!) to see that’s not where it should be, because the 0 height wrapping div is most likely not supposed to be 0 in the first place. Wow Senff, are you saying that IE can reason!? ;) I’m fairly certain that it can’t. There’s nothing wrong or invalid with a 0 height parent element.

I agree the code is messy (in fact I very rarely get into helping with Joomla problems – can’t figure why anyone uses it), but I’m confident that IE is messing things up (that and feeding IE weird values in ie.css). I most definitely would have coded things different, but the fact is that there is nothing technically wrong with the existing code – well there are errors (and may even be part of the problem), but I mean in general the way this is laid out with the floating, relative positioning, and negative margins is not invalid.

Jeremy, I’m guessing you’re still playing around with this because I’m seeing changes as I try to find the problem, but I’ll keep trying. One thing to do is to fix the 7 errors you have. The nested headers may have something to do with it. I’ve found some of the trouble, but I still can’t get the slider image up under the floats in the header (I’m currently in IE8 however, so 9 may be alright).

[wolfcry911]

Jeremy, the easiest fix that I can find is to place position: relative on the div (no class or id) that contains the aside. And then set the aside to position: absolute. From there you may need to eliminate some of the rules in ie.css

[Author]

Posts