Centered image to "stretch" a DIV not working in IE7...

Discussion in 'Web Design and Development' started by Makosuke, Oct 4, 2006.

  1. Makosuke macrumors 603

    Aug 15, 2001
    The Cool Part of CA, USA
    First of all, here's a page that displays the problem in question:

    Second, here's a few screenshots from; the one for MISE 7 shows what I'm talking about:

    Now, for the description: I've got a div-based layout with your standard lefthand menu and block of text for the body. As usual with this kind of layout, since I want the body color to be at least as long as the lefthand menu, I need a way to "stretch" the div down to at least that length. I did this by sticking a "badge" image as the last thing in the div, and setting it to "clear: both", so it'll always appear below the menu.

    This works in EVERY browser I've tested it in all the way back to IE4; IE6 is fine, IE5 is fine, IE5 Mac is fine, Camino, Firefox, Opera, Safari, etc all fine. Except for IE7 beta; for some reason, the image doesn't "stretch" properly in it (and it does this on an actual install, not just I can't figure out if I'm doing something wrong or if it's a bug.

    I also have a feeling there's a better way to be centering the image with CSS (it's also a # link to the top of the page; figure it might as well do something on longer pages).

    The relevant chunks of the code in question are thus:


    <a href="#top"><img src="/images/minibadge.jpg" width="100" height="60" class="badge" alt="Back to top of page" /></a>


    img.badge { display: block; clear: both; margin-left: auto; margin-right: auto; padding: 1em; text-align: center; }
    ...I'm using the auto margins to "properly" center the image using CSS, and the text-align to account for stupid IE junk. Is there a smarter way to be doing what I'm doing here?

    Any idea why IE7 isn't behaving like ANYTHING else?
  2. ThunderLounge macrumors 6502


    Sep 20, 2006
    IE is a freakin mess with equal height divs like this. To be honest, I'm surprised it's working in IE6.

    Since you already have a containing div for the left sidebar, and the main content, the "easiest" way would be to use a padding/margin combination, and hide the overflow.

    For example:

    You would add a large padding to the bottom of the "body" div, and offset it with a negative margin.

    Something like a 10000px bottom padding, and a -10000px margin. This effectively offsets to a 0 balance, and combined with the overflow (I'll mention in a sec), it will equal out the column height. However, you will probably want to do the same thing on the left sidebar as well, so that if the main content is longer, the sidebar equals out in height as well.

    For the container, add in "overflow:hidden".

    Now, you'll have to either add a hack to the css file, or (preferably) use IE's conditional comments to add in an additional IE stylesheet.

    You will need to add to this an overflow:hidden for the main document body (I.E. body, not div.body).

    One more possible problem might be that now the columns will overlap your footer.

    I haven't disected your layout enough to determine if it will or it won't.

    If it does, look up this example at and scroll down to the bottom about 80%.

    You'll see it mention the equal height divs/columns, and then describe the footer situation.

    There are other ways to do this, but this would probably involve the least amount of tweaks to your current layout.
  3. Makosuke thread starter macrumors 603

    Aug 15, 2001
    The Cool Part of CA, USA
    Thanks for the suggestion and link, ThunderLounge, but I'm not entirely sure that's going to work with my layout.

    The fundamental problem is that IE7's "clear" only respects floating objects within the same containing box as the object with the clear property. Since my layout has the floating object outside the box I'm trying to "stretch", it is ignored by that clear.

    I'm not sure if this is technically correct according to the spec or not--I haven't read through it in that much detail--but regardless EVERYTHING else, from IE4 all the way to the latest FF, Opera, or Webkit behave this way and clear based on ANY floats, not just ones in the same container.

    So far, I haven't come up with any workarounds, other than setting a sufficiently large "min-height" on the box I want to stretch, which works but isn't very consistent since font sizes differer from platform to platform. I guess I'll probably do that and just accept that the page has a lot of unnecessary vertical whitespace on a Mac.

    As for my specific layout:

    I realize my multi-column thing isn't done very "cleverly", but the advantage is the CSS is pretty basic; the functional part is that I have a container div with a background color the same as the lefthand menu, and it handles the external borders; I then have a floating lefthand div for a menu, and a "body" div to its right with a white background.

    Since the body div pushes the container's height all the way down, the lefthand menu appears to stretch all the way to the bottom even though it actually doesn't, and the container also handles the bottom border hairline.

    The only thing required to complete the effect is something in the body div to force it to be at least as long as the lefthand floating menu. I was doing this with a little badge iimage at the bottom, which was part of the designer's concept anyway, so I didn't need to do any crazy 0 height divs or such business; I just told that object to clear: both, and it automatically pulls the body down past the floating left menu.

    I did realize it was silly to be making it a block and putting that inside link tags; I should've just put it in a centered paragraph tag for the centering and made the paragraph clear: both, but that wouldn't have fixed the IE7 problem I'm running into.

    I can see to a degree where the logic of not clearing things that are outside your own container lies, but since NOTHING else does this I'm at something of a loss as to why the change was made, and if it's a bug or an intentional design decision.
  4. ThunderLounge macrumors 6502


    Sep 20, 2006
    With IE's dev team... it's tough to tell. For all we know it was something written 5 minutes before quitting time that someone forgot to revisit. :eek:

    I do think that the +/- padding/margin implementation would work though. Since IE7 is the only one with that problem, you could just target it with a conditional comment. Since it's still in beta, that would probably be the best idea, just in the small hope case that they made a typo or something and fix it.

    I personally haven't noticed the situation with floats that you mention, but I'll be keeping an eye out for it.

    Since it's just a workaround for IE7, I'm not sure if the additional div for the footer would be necessary or not. But, it's an alternative to play with at least.

    Then again, what's your current traffic % with IE7?

    If it's pretty low, I wouldn't (personally) worry about it too much yet. At least until it comes out of beta and begins to increase in usage. While it's not as good as in everything else, it still was acceptable. Also,
    as your content grows, it will be less of an issue as well.
  5. Makosuke thread starter macrumors 603

    Aug 15, 2001
    The Cool Part of CA, USA
    I'm certainly with you that the "new" IE7 dev team seems to be stuck somewhere between wanting to do things right and making totally arbitrary decisions to not support really basic features or do things in weird ways. Like the fact that it STILL doesn't support the :after pseudoclass--seriously, can it be THAT hard?

    Anyway, current traffic shows IE7 at about 2% of pageviews (it just passed IE5, which is a relief--that thing is even more of a disaster than IE6), and I really only have about 5 or 10 pages that are short enough for this to matter--the vast majority of the site's pages are long enough that it doesn't matter. I just didn't want to leave those handful looking ugly if I didn't have to.

    I suppose I'll just hope it's a bug that'll be fixed before release, and if not add a min-height to the stylesheet to deal with it. I'm proud that I have a grand total of *one* workaround in my stylesheet (to deal with the 3px bump in IE5 that was totally breaking the banner; I'm not even bothering in the rest of the text since it's not significant), so I'm loathe to add any specific hacks or conditional statements just for IE7, espeically since it's only a minor cosmetic issue.

    I'm just glad to see NS4 down to 0.04% of traffic so I can comfortably feed it a bland stylesheet and not worry about it.
  6. ThunderLounge macrumors 6502


    Sep 20, 2006
    I'll be the first to admit that for really old browsers, I'm lazy. That is unless there is a real need to support them based on traffic and target audience.

    In a lot of cases, I've simply added a class in a generic stylesheet, and then used @import for the rest. Take a non-hidden class and hide with those. For the end user, they get a nice little message about upgrading.

    I have had occasions where there was a justification for it, but those are few and far between. My personal thought on it is that if we keep babying people that still use these hunks of junk, then they will never have a reason to update them.

    Of course, if I had my way I'd leave perfectly correct code still broken in IE as well. But like even 10% of the people would "get the point".

    What really amazes me is the fact that there are "professional" companies out there that have no idea what cross-browser compliance is. I did a project for a firm early last spring where they already had a "company" that handled their database of clients, and wanted to integrate their web app with it. Sure, no problem, right? The "other company" provided a script that only worked in IE6, and didn't "see the problem since that's what everbody uses".

    OK, I'd better hush now and get back on topic.

    Like I said, I didn't get real in-depth with your site, but those 5-10 pages you're referring to, are they static or dynamic? What I'm getting at, is would it be possible to put a little bit of padding on the top of the image at the bottom for those pages only? Just enough to lengthen it out a bit. What comes to my mind is that the only browser that would do anything with it would be IE7, as the rest show plenty of room and wouldn't effect it. Just a thought, but the idea of leaving it for now is probably better. If IE7 hits the streets (and hopefully the toilet as well) with the same issue, then revisit it.

    Of course, if you're like me, it's going to drive you nuts until you figure it out.
  7. Makosuke thread starter macrumors 603

    Aug 15, 2001
    The Cool Part of CA, USA
    Therein lies the rub. If the site has clean enough markup that it is useable in NS4, NS3, IE3 or Lynx completely unstyled despite the fact that cumulatively those browsers don't equal 0.1% of traffic, and I'm adding some nice CSS3 shadow effect touches for Safari users (look REALLY spiffy if you ask me, but of course NOTHING else supports them), then it's going to bug the crap out of me that it's not doing what I think it should in a browser that is otherwise reasonably functional, and at the very least the least bad of the IE swamp.

    I like to be consistent, but the handful of short ones are static pages, so maybe I'll just inline a min-height or something. If it's still in the release version, anyway.

    I liked my wife's suggestion: "Why not just code it well and leave it looking like a raging disaster area in IE because of the bugs with a note that says "Go download a real browser and this'll look better.""

    Ahh, if only I were that mean, life would be so much easier.
  8. x704 macrumors regular


    Apr 15, 2006

    Heh, that's what I did in my website. Only I am more cruel and did not leave a note. If you want to see something work well you need to download something that works well.

Share This Page