PDA

Click to See Complete Forum and Search --> : Not all divs displaying in IE

shotsy247
03-04-2009, 07:57 AM
Hi All,

I have a div that contains four other divs. Each of these divs contains an image. I have created the four images so the total width equals the width assigned to the parent div. All displays as expected in Firefox, but the last image disappears in IE due to overflow hidden.

Here's the css:

#products{
background-color:#009933;
width: 574px;
height:144px;
float:left;
clear:both;
margin: 5px 0 0 0;
display:inline;
overflow:hidden;
}

#prod1{
float:left;
display:inline;

overflow:hidden;
}

#prod2{
float:left;
display:inline;

overflow:hidden;
}

#prod3{
float:left;
display:inline;

overflow:hidden;
}

#prod4{
float:right;
display:inline;

overflow:hidden;
}

Each image goes in the prod divs. Image one and four are 144px wide. Images two and three are 143px wide.

Thanks for any help.

_t
Fang
03-04-2009, 08:39 AM
<style type="text/css">
#products {
background-color:#009933;
width: 574px;
height:144px;
float:left;
margin: 5px 0 0 0;
overflow:hidden;
}
#products img {float:left;}
</style>

</head>
<body>
<div id="products">
<img alt="" src="anImage.jpg" height="144" width="144">
<img alt="" src="anImage.jpg" height="144" width="143">
<img alt="" src="anImage.jpg" height="144" width="143">
<img alt="" src="anImage.jpg" height="144" width="144">
</div>
</body>
shotsy247
03-04-2009, 08:52 AM
Thanks as usual Fang.

That solved the issue. But I'm still not sure why having the four divs within the products div would cause the last image to drop. The content width of the divs was not greater than the width of the parent div. Also I can see other implementations (such as text within each div, where I would want the inner divs.

Could you or someone please explain why that was happening and any other possible solutions?

For my immediate need, the solution you proposed will work as I am using four images currently.

Thanks again.

_t
Fang
03-04-2009, 09:02 AM
Basically don't use css that is unnecessary; it only confuses the rendering engine and can produce buggy results. Same is true is with adding unnecessary elements - The KISS principle.
shotsy247
03-04-2009, 09:32 AM
Yes I see your point and agree. However I would still like to know why 4 x 25 != 100 in IE (simplified math for illustration of question).

4 Divs each with content being 25 px wide, should fit in a parent div that is 100px wide. They do in Firefox. Why do they not in IE? Understanding the issues at work here will be help me avoid coding mistake in the future.

Thanks again for your help. It is appreciated.

_t
Fang
03-04-2009, 10:20 AM
Make sure you are in Standards mode; a valid DTD
http://www.ericmeyeroncss.com/bonus/render-mode.html (Changing Width and Height)