Grow your CSS skills. Land your dream job.

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

  • # August 13, 2012 at 9:03 pm

    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).

    # August 13, 2012 at 9:54 pm

    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.

    # August 13, 2012 at 10:13 pm

    I actually didn’t code this website, which is why figuring out what is going wrong is a bit of a challenge (not that my code would be any better). Part of the reason for the awkward coding is that the website is made in Joomla. The header image is set as a module that way it can be changed to a different image on each page from the back-end (this explains the large negative margin).

    At this point, I’m not looking for the correct fix, just a quick fix to get it looking decent in IE. Once the design gets approved, I’ll go in and clean up the code a bit.

    # August 13, 2012 at 10:16 pm

    I’m going to try adding a 400px height to .slider .moduletable_slider.

    # August 13, 2012 at 10:24 pm

    No dice.

    # August 14, 2012 at 3:27 pm

    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).

    # August 15, 2012 at 6:49 am

    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

    # August 16, 2012 at 3:05 am

    @WolfCry911 – Sorry about that, I was trying a few different things after I posted this thread. I ended up finding a fix that is less than ideal, but it is working for now. It leaves a small gap in the header on some pages, but for the most part looks okay.

    I’m not a huge fan of Joomla either (I prefer WordPress). But the company I recently started working for built all of their previous sites using Joomla – so now I’m trying to clean a few of them up a bit. Thanks for all of you help man!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".