Page 1 of 1

IE6 Layout Problem

Posted: Wed Apr 22, 2009 11:29 am
by mad_phpq
Hi,

Can someone look at this div layout issue im having with IE6.

Stylesheet:

Code: Select all

<style>
 
body 
{
    margin:auto;
    text-align:center;
}
 
#page 
{
    margin:auto;
    text-align:center;
    width:800px;
    height:200px;
}    
 
div.box1
{
    width:180px;   
    height:200px;
    float:left;
    margin-right:26px;
}
 
div.topLeft 
{
    padding:0px;
    margin:0px;
    width:15px;
    height:14px;
    float:left;
    background-image:url('Images/travel_top_left.gif');
    
}
 
div.top 
{
    padding:0px;
    margin:0px;
    width:150px;
    height:14px;
    float:left;
    background-image:url('Images/travel_top.gif');
    background-repeat:repeat-x;
}
 
div.topRight 
{
    padding:0px;
    margin:0px;
    width:15px;
    height:14px;
    float:left;
    background-image:url('Images/travel_top_right.gif');
}
 
div.left 
{
    width:15px;
    height:160px;
    float:left;
    background-image:url('Images/travel_left.gif');
    background-repeat:repeat-y;
}
 
div.center 
{
    height:100px;
    width:90px;
    float:left;
    background-color:#ac3996;
}
 
div.topRow 
{
    display:block;
    clear:left;
    float:left;
}    
 
div.middleRow 
{
    display:block;
    clear:left;
    float:left;
} 
 
div.bottomRow 
{
    clear:left;
    float:left;
} 
 
div.right
{
    width:15px;
    height:160px;
    float:left;
    background-image:url('Images/travel_right.gif');
    background-repeat:repeat-y;
}   
 
</style>
HTML:

Code: Select all

<div id="page">
        
        <div class="box1">
                <div class="topRow">
                    <div class="topLeft"><!-- --></div>
                    <div class="top"><!-- --></div>
                    <div class="topRight"><!-- --></div>
                </div>
                
                <div class="middleRow">
                    <div class="left"><!-- --></div>
                    <div class="center">hghghghghghg</div>
                    <div class="right"><!-- --></div>
                </div>
        </div>
        
    </div>
Here is a screenshot of what's happening. http://i169.photobucket.com/albums/u217 ... reen-1.jpg

Re: IE6 Layout Problem

Posted: Wed Apr 29, 2009 12:36 pm
by Reviresco
Expanding Box Problem (on div.center):

Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.

Affects: Internet Explorer 6.0
Likelihood: Likely

Re: IE6 Layout Problem

Posted: Wed Apr 29, 2009 4:29 pm
by kaszu
Try adding

Code: Select all

div.center {
    overflow: hidden;
}