IE6 Layout Problem

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
mad_phpq
Forum Commoner
Posts: 85
Joined: Fri Apr 27, 2007 5:53 am

IE6 Layout Problem

Post 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
Last edited by Benjamin on Wed Apr 29, 2009 4:36 pm, edited 1 time in total.
Reason: Changed code type from text to html, css.
Reviresco
Forum Contributor
Posts: 172
Joined: Tue Feb 19, 2008 4:18 pm
Location: Milwaukee

Re: IE6 Layout Problem

Post 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
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: IE6 Layout Problem

Post by kaszu »

Try adding

Code: Select all

div.center {
    overflow: hidden;
}
Post Reply