[CSS] IE6 float problem

programming web dev
1

Hi peoples, Iā€™m having a problem with IE6 and floating divs. My layout simply goes:

body, main wrapper, logo header, inside wrapper, navigation (float left), content (float right).

Heres a pic of whats happening, top is firefox working fine, and bottom is IE.
http://www.cdupload.com/pfiles/3930/floaterror.gif

heres the css, ive tried playing with clear with no avail. any help would be greatly appreciated :slight_smile:


html
{
    postion: relative;
}

body
{
    font: 12px Tahoma,Verdana;
    color: #000000;
    text-align: center;
    background-image: url(assets/img/gradient_bg.jpg) repeat-x;
    background-color: #3db402;
}

form
{
    padding: 0px;
    margin: 0px;
}

a:link, a:visited, a:active
{
    color:#4D9312;
    font-weight:bold;
    text-decoration:underline;
}
a:hover
{
    color:#64BF18;
    font-weight:bold;
    text-decoration:underline;
}

#content
{
    position: relative;
    text-align: left;
    width: 778px;
    margin: 0 auto;
    border: #000000 solid 3px;
    background-color: #FFFAD6;
    padding: 3px;
}

#header
{
    width: 774px;
    height: 196px;
    background-color: #64BF18;
    border: #4DB21B solid 2px;
    padding: 0px;
    margin: 0px;
}

.zspace
{
    height: 10px;
    font-size: 10px;
    padding: 0px;
    margin: 0px;
    clear: both;
}

/*hide from ie */
html>body .zspace3 {
    height: 10px;
    font-size: 10px;
    padding: 0px;
    margin: 0px;
}

* html .zspace3 {
    height: 4px;
    font-size: 4px;
    padding: 0px;
    margin: 0px;
}

#mainwrap
{
    position: relative;
}

#navigation
{
    position: relative;
    float: left;

}

.menu
{
    width: 196px;
    background-color: #FFF;

}

.menuheader
{
    width: 100%;
    height: 26px;
    line-height: 28px;
    text-indent: 31px;
    color: #FFF;
    font-size: 14px;
    font-weight: bold; 
}

.menuinline
{
    list-style:none;
    margin: 0px;
    padding: 0px;
}

.menuinline li
{
    display: block;
    text-indent: 30px;
    line-height: 23px;
    height: 23px;
    border-bottom: 1px solid #FFF;
    font-weight: bold;
    color: #FFF;
    background-color: transparent;
    behavior: url(http://localhost/zc/assets/iefix.htc);
}

.menuinline li:hover, .menuinline li.hover
{
    background-color: #E3E0C8;
    cursor: pointer;
    color: #FFF;
}

.menuinline li:active, .menuinline li.active
{
    background-color: transparent;
}

.menuinline li a
{
    color: #FFF;
}

.menuinline li a:hover
{
    color: #FFF;
}


#main { position: relative;    float: right; width: 565px;    height: 1%; }



#footer
{
    position: relative;
    clear: both;
    width: 774px;
    height: 40px;
    background-color: #64BF18;
    border: #339900 solid 2px;
}

#parchwrap
{
    position: relative;
    width: 550px;
    text-align: center;
    clear: both;
}

#parchleft
{
    width: 270px;
    height: 123px;
    position: relative;
    float: left;
    background: url(http://localhost/zc/assets/img/scroll_bg.gif) no-repeat;
}

#parchright
{
    width: 270px;
    height: 123px;
    position: relative;
    float: right;
    background: url(http://localhost/zc/assets/img/scroll_bg.gif) no-repeat;
}

.parchinside
{
    height: 100%;
    text-align: left;
    padding: 13px 5px 5px 20px;
    color: #FFF;

}

.parchinside a
{
    color: #FFF;
    text-decoration: underline;
}

.parchinside input
{
    font: 12px Tahoma,Verdana;
    color: #FFF;
    border: 1px dashed #FFF;
    background: #CCA970;
}

#locationbar
{
    position: relative;
    clear: both;
    background-image: url(http://localhost/zc/assets/img/loca_bg.gif);
    background-color:  #339900;
    border: #339900 solid 2px;
    width: 555px;
    height: 24px;
    line-height: 24px;
    text-indent: 48px;
    text-align: left;
    font-weight: bold;
    color: #FFF;
}

#locationbar a
{
    color: #FFF;
    text-decoration: none;
}

#locationbar a:hover
{
    text-decoration: underline;
}

.rss
{    line-height: 24px;
    
    border: 0px;
}

#maincontent
{
    position: relative;
    clear: both;
    border: 2px solid #339900;
    border-top: 0px;
    background: #FFFBE0;
    width: 545px;
    padding: 5px;
    text-align: left;
}

.maincontentinner
{
    background-color: #FFF;
    padding: 3px;
    border: 1px solid #D7F2C9;
}

.gamemenu
{
    text-align: center;
    border: 1px dashed #64BF18;
    background: #FFF;
    font-weight: bold;
    width: 529px;
    color: #339900;
    padding: 3px;
}

.center
{
    width: 100%;
    text-align: center;
}