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

First of all, here's a page that displays the problem in question:

http://animeworld.com/learnindex.html

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

http://browsershots.org/website/http://animeworld.com/learnindex.html#success

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 BrowserShots.org). 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:

(X)HTML:



CSS:


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

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.

ThunderLounge said:

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.

Click to expand...

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.

ThunderLounge said:

Of course, if you're like me, it's going to drive you nuts until you figure it out.

Click to expand...

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.