missing borders and background colours in IE6

[andrew]

Hi there,

I've fought with this problem before in IE and "solved" it by setting
various block elements to have 100% width, but now that won't work for me
and I'm just curious in general as to what the heck IE is doing here.

If you visit the page at http://iceman.redlinesoftware.com/test.html in IE,
the background for the text "sections" to the right should be yellow, but
they won't be when you first view the page; you first have to scroll the
page up and down and some of the background colour will then appear.

If I the 'section' class in the css to have 100% width, the colour appears,
but then the elements flows off the right of the page and a horizontal
scroll bar appears.

So what I'm asking is, what's causing this problem and how do I go about
fixing it?

Thanks in advance,
Andrew

[yb]

Don't want to be picky, but the HTML is not valid, (there is no title
element in the head section). Anyway, adding a title does not fix the
problem. Im not sure why its happening, I think its a bug with IE's
rendering.

Changing the #centercontent as follows works in IE6

#centercontent {
position: absolute; left : 210px; top : auto;
/* margin-left: 210px; */
}

not sure if this is acceptable for what you are trying to accomplish
though.

Also, I'm not sure you want to set the borders the way they are
currently, the 'double' line appears between each section. Perhaps
this:

#centercontent {
position: absolute; left : 210px; top : auto;
/* margin-left: 210px; */
border: 1px solid #CCC;
background: #FFD;
}

..section {
/* width: 100%; */
border-bottom: 1px solid #CCC;
padding: 0.5em;
}

is what you are looking for, the background is also moved into
'centercontent' which shines through in child elements since their
default background is transparent

[andrew]

Hi there,

Thanks for the reply! Your proposed solutions seems to do the trick. I
left out some extra css formatting for my example here, so the double border
thing isn't really an issue, but thanks for the remarks anyway.

Thanks again,
Andrew

"yb" <ba*********@ya hoo.ca> wrote in message
news:11******** **************@ f14g2000cwb.goo glegroups.com.. .

Don't want to be picky, but the HTML is not valid, (there is no title
element in the head section). Anyway, adding a title does not fix the
problem. Im not sure why its happening, I think its a bug with IE's
rendering.

Changing the #centercontent as follows works in IE6

#centercontent {
position: absolute; left : 210px; top : auto;
/* margin-left: 210px; */
}

not sure if this is acceptable for what you are trying to accomplish
though.

Also, I'm not sure you want to set the borders the way they are
currently, the 'double' line appears between each section. Perhaps
this:

#centercontent {
position: absolute; left : 210px; top : auto;
/* margin-left: 210px; */
border: 1px solid #CCC;
background: #FFD;
}

.section {
/* width: 100%; */
border-bottom: 1px solid #CCC;
padding: 0.5em;
}

is what you are looking for, the background is also moved into
'centercontent' which shines through in child elements since their
default background is transparent

[andrew]

Actually, I found a better fix for my problem. I have a footer in my actual
site and the absolute positioning causes the footer to remain at the top
under the center content.

I instead added 'position: relative' to my .section and it works with the
#centercontent as is. The relative positioning actually fixes other
elements that I had width 100% on before, so now I can remove those too.

Andrew

"andrew" <no****@noname. com> wrote in message
news:Mxzef.1458 96$Io.7732@clgr ps13...

Hi there,

Thanks for the reply! Your proposed solutions seems to do the trick. I
left out some extra css formatting for my example here, so the double
border thing isn't really an issue, but thanks for the remarks anyway.

Thanks again,
Andrew

"yb" <ba*********@ya hoo.ca> wrote in message
news:11******** **************@ f14g2000cwb.goo glegroups.com.. .

Don't want to be picky, but the HTML is not valid, (there is no title
element in the head section). Anyway, adding a title does not fix the
problem. Im not sure why its happening, I think its a bug with IE's
rendering.

Changing the #centercontent as follows works in IE6

#centercontent {
position: absolute; left : 210px; top : auto;
/* margin-left: 210px; */
}

not sure if this is acceptable for what you are trying to accomplish
though.

Also, I'm not sure you want to set the borders the way they are
currently, the 'double' line appears between each section. Perhaps
this:

#centercontent {
position: absolute; left : 210px; top : auto;
/* margin-left: 210px; */
border: 1px solid #CCC;
background: #FFD;
}

.section {
/* width: 100%; */
border-bottom: 1px solid #CCC;
padding: 0.5em;
}

is what you are looking for, the background is also moved into
'centercontent' which shines through in child elements since their
default background is transparent