Forum Moderators: not2easy

Message Too Old, No Replies

IE6 giving me grief. messes up column widths.

         

ozzie123

1:40 am on Apr 7, 2008 (gmt 0)



I've just created a site which tests perfectly in most browsers except IE6 which ruins the column widths. The third column is pushed below the middle column and I've tried numerous fixes to no avail. The site can be viewed at <snip>
The original CSS for the problem div is:

#content {
width:270px;
height:615px;
background:#6a5126;
float:right;
margin: 0 5px 0 5px;
padding: 18px 18px 18px 18px;
display: inline;
}

I've also tried adding a conditional comment to my page as follows:
<!--[if IE]>
<style type="text/css">
#content {
width:260px;
height:600px;
}
</style>
<![endif]-->

I've never done this before but it doesn't seem to be working. Does anyone have any ideas how to fix this problem? I'm ready to pull out my hair with this IE glitch!

Thanks so much!
Edit/Delete Message

[edited by: engine at 8:55 am (utc) on April 7, 2008]
[edit reason] no urls, thanks [/edit]

swa66

5:47 am on Apr 7, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Take a look at the parent's width. A float not fitting is most likely due to the width not being sufficient to fit it. Add to that the IE broken box model and you have the recipe for what you describe.

ozzie123

1:02 pm on Apr 7, 2008 (gmt 0)



Thanks. I think I found the answer by displaying all floated divs as inline. I wish it wasn't such a fight with IE...

Xapti

2:15 pm on Apr 7, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



floating and inline are completely different things, I would be suprized if that was your answer for anything other than images.

You never really specified a whole lot of HTML or CSS, so I'm wondering if you have included a proper doctype? IE6 has a faulty box model for many situations.

ozzie123

2:31 pm on Apr 7, 2008 (gmt 0)



Oh...now that has me concerned...

The html can be viewed at this link <>
My entire CSS Style sheet is:

@charset "UTF-8";
/*---------- basic styling -----------*/
* {
margin: 0px;
padding: 0px;
}
body {
background-color:#a3a36d;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
#wrapper {
position:relative;
width:774px;
height:1136px;
margin:0 auto;
text-align:left;
background-color:#cfc8b2;
}
#clear {
clear:both;
}
/*------ position container elements ---------------*/
#header {
position:relative;
background:*cfc8b2;
height:479px;
}
#banner {
height: 123px;
}
#flashbanner {
margin: 0 0 0 5px;
height: 356px;
}
#cruelmps {
width:224px;
height:650px;
background:#a39873;
float:left;
margin: 0 0 0 5px;
display: inline;
}
#crueltext {
width:190px;
height: 370px;
margin: 15px 5px 15px 15px;
padding: 0 12px 0 0;
overflow: auto;
}
#nicemps {
width:224px;
height:650px;
background:#a39873;
float:left;
margin: 0 0 0 5px;
display: inline;
}
#nicetext {
width:190px;
height: 370px;
margin: 15px 5px 15px 15px;
padding: 0 12px 0 0;
overflow: auto;
}
#content {
width:270px;
height:615px;
background:#6a5126;
float:right;
margin: 0 5px 0 5px;
padding: 18px 18px 18px 18px;
display: inline;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 17px;
font-weight: normal;
color: #FFFFFF;
}
.mptext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 17px;
font-weight: normal;
color: #000000;
font-style: normal;
}
ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 17px;
color: #FFFFFF;
margin-left: 18px;
}
.footnote {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 15px;
font-weight: normal;
color: #FFFFFF;
}
/*------ take action elements ---------------*/
#actionwrapper {
position:relative;
width:774px;
height:974px;
margin:0 auto;
text-align:left;
background-color:#cfc8b2;
}
#actionbanner {
height: 278px;
}
#actionheader {
position:relative;
background-color:#cfc8b2;
height:401px;
width:774px;
}
#sidebar {
width:206px;
height:568px;
float:left;
margin: 0 0 0 6px;
background-color:#cfc8b2;
display: inline;
}
#actioncontent {
width:516px;
height:532px;
background:#a39873;
float:right;
margin: 0 5px 0 5px;
padding: 18px 18px 18px 18px;
display: inline;
}
ol {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 17px;
color: #000000;
margin-left: 18px;
}

[edited by: SuzyUK at 5:40 pm (utc) on April 7, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]