www.webdeveloper.com
Results 1 to 6 of 6

Thread: Not all divs displaying in IE

  1. #1
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    126

    Not all divs displaying in IE

    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:

    HTML Code:
    #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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <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>

  3. #3
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    126
    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

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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.

  5. #5
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    126
    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

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Make sure you are in Standards mode; a valid DTD
    http://www.ericmeyeroncss.com/bonus/render-mode.html (Changing Width and Height)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles