ansaurus

Question

DIV disappears on IE7 and IE6 when using margin 'auto' in a DIV inside li item

Answer 1

A:

div#outer may potentially be spanning the full width of your LI, which is 1500px wide (inheriting from your UL CSS declaration). If div#inner is centered and 100px wide, it would display outside the scope of your overflow:hidden on div#menu.

I believe I can see where you are trying to go with this, perhaps trying to have a gallery slider. You may need to explicitely set the width of your LI to 500px. You can then have three LI's floated next to each other.

cballou 2009-11-05 18:49:48

Any clue why this is? It was the same thing I came up with in my answer, but I can't figure out IE's thinking behind it. Shouldn't a floated block take the width of its widest child?

Steven Xu 2009-11-05 18:54:02

It was really just a hunch, IE is bugged :x

cballou 2009-11-05 19:41:42

@cballou: "perhaps trying to have a gallery slider"- That's right. It's DIV slider.

understack 2009-11-06 02:29:08

Answer 2

+1 A:

Regarding your problem itself, IE developer tools suggests that the following is happening (with the IE exception in boldface):

div.menu is styled as width 500px with overflow hidden
The enclosed ul.menu is styled with width 1500px, and an li floats therein. In IE, the li incorrectly takes the width of its parent ul (1500px) rather than the width of its child block elements, namely, div#outer, which derives its width from its child div#inner, which is 100px.
The div#inner is centred in div#outer (in some versions of IE, you might need to add text-align: center in the style for div#outer). In IE, this is too far to the right due to the oversizing of div#outer caused by the oversizing of li. Even if you don't use developer tools, turning div.menu to overflow:visible quickly makes the location of the text to show up clear.

Recommended solutions:

Make the width of li no more than 500px.
There's no need to add a useless outer div within li. Unless you have a compelling reason, just plop div#inner right in li.
Download IE Developer tools

There are a few parts of the CSS that don't seem to make sense to me, that perhaps once you cleared up, might make the problem easier to isolate.

Steven Xu 2009-11-05 18:52:55

@steven: It's a part of DIV gallery. Showing overflow:visible/ removing outer div/changing li width to 500 is not an option.

understack 2009-11-06 02:39:41

Answer 3

A:

As noted above your div#outer is spanning the full width of the LI(1500px). Divs are block level elements which means that by default they will span the entire width of their containing element unless told otherwise.

Also, the statement made about the LI incorrectly taking it's width from it's containing element rather than it's child elements is not totally right. By default that is true, but the CSS rule declared to make the LI (display:block;) changes the LI from an inline element to a block level element which like the DIV will take it's width from it's containing element.

In summary: block elements span the entire width of their containing element by default, inline elements span the width of their widest child by default.

jaywon 2009-11-05 19:12:33

ansaurus

tags:

views:

answers:

DIV disappears on IE7 and IE6 when using margin 'auto' in a DIV inside li item

related questions