ansaurus

Question

Nested DIVs - How to make it work for Internet Explorer 7?

Answer 1

+2 A:

“Work”? What's the exact issue with it?

For me, it renders mostly the same as Firefox et al in IE7, as long as the document has a suitable Standards Mode DOCTYPE. I do see a problem where it adds a horizontal scrollbar, which you can fix by adding something like overflow-x: hidden; padding-right: 24px; on the content div.

(The problem being that by doing a float without an explicit width, you have asked for shrink-to-fit-content-width behaviour, but the exact content width is dependent on whether there's a scrollbar on the content div, which IE can't know without knowing if the content scrolls, which is in turn dependent on the parent's content-width. This catch-22 is why IE gets confused; in Quirks Mode it totally gives up and makes the float full-width. This is why shrink-to-fit floats should be used with caution. If you set an explicit width on the floated element there would be no difficulty.)

bobince 2009-11-08 21:27:52

cool, didn't even think it was in quirks mode.

orip 2009-11-08 21:28:48

Shrink-fit is what I need. I would like to make it work with ie7 and XHTML 1.0 Transitional (otherwise I will have to change the whole web app dtd).

Martin 2009-11-09 14:45:57

XHTML 1.0 Transitional is a perfectly good Standards Mode doctype, yeah. Check you are putting it right at the top of the document with no other content before it. Do `javascript:alert(document.compatMode)` to see if it has taken (should be `CSS1Compat`).

bobince 2009-11-09 15:21:49

Ofcourse ; ) Does it work for your ie7? Note the img tag at the bottom with display: block (to center it)

Martin 2009-11-09 16:02:03

Why the `display: block` shenanigans? Surely just a normal image with `text-align: center` on the parent `div` would be easiest?

bobince 2009-11-09 19:31:07

In FF it makes no difference whether it is display: block or text-align center. But in ie7, again, the text-align center makes the footer div much taller than the img. It doesn't look ok with that.

Martin 2009-11-10 09:22:38

Answer 2

A:

<div id="test-div-two"> is a floated div without an explicit width. I think browsers are free to interpret the width any way they want in this case.

If you specify a width (e.g. width:50px;), it looks the same on all browsers.

orip 2009-11-08 21:27:57

In CSS 2.0 a float without width would have the same width as a non-float, ie. it would be full width minus border and padding. However, only IE5/Mac actually did this; other browsers did various versions of shrink-to-fit, which CSS 2.1 then made standard (though not in a wholly well-defined way).

bobince 2009-11-08 21:49:32

BTW: I added the <img/> tag there it seems to make a difference to the worse. I need the grippie to be centered.

Martin 2009-11-09 15:17:08

ansaurus

tags:

views:

answers:

Nested DIVs - How to make it work for Internet Explorer 7?

related questions