DIV disappears on IE7 and IE6 when using margin 'auto' in a DIV inside li item
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="te开发者_运维问答xt/css" media="screen">
div.menu {position: relative; width: 600px; overflow: hidden;}
ul.menu {display: block; padding: 0px; width: 1500px; margin: 0; list-style: none;}
.menu li {display: block; float: left; padding: 0 2px; }
</style>
</head>
<body>
<div style="width: 500px;" class="menu">
<ul class="menu">
<li>
<div id='outer'>
<div id='inner' style="margin:0 auto;width:100px;">
I want this text to show up
</div>
</div>
</li>
</ul>
</div>
</body>
This is stripped down version of a full page. I can see the text 'I want this text to show up' in FF. But this is invisible in IE7 and IE6. The moment I remove 'auto' word from margin in inner DIV, it shows up on both explorers. How can I fix this? I can't remove 'auto' as I want inner div to be centrally aligned inside outer div.
NOTE: It's a part of DIV slider.
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.
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.
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.
加载中,请稍侯......
精彩评论