width 100% and horizontal scrolling

[redux]

maybe i'm overlooking something, but...i've just created http://dev.salford.ac.uk (the first step towards prototyping a fully xhtml 1 transitional compliant site). at this stage it still contains some kludged table header, but contained inside a div.
now, if i resize my browser window so that the table is bigger than the width of the browser, and i scroll horizontally, the green background of the header does not extend into the "scrolled" area. how could this be fixed in a compliant enough way ?
hope this explanation made sense...just try it out and you'll see what i mean. i'm still new-ish to xhtml+css, so it's probable that i've made some conceptual mistake in the structure of the page...

[SJH]

Hi Redux,

It's working for me fine... I've tried changing the size of the window to a variety of sizes and the green always stays in the right place as is expected.

Maybe a glitch in your browser

-Sam

[redux]

did you try scrolling horizontally ?
it's failing under phoenix 0.5, opera6 and IE5.5SP2 on my machine...

[SJH]

Yup... I resized the window and scrolled vertically as far as I could -- the green stayed there all along.

Strange if it's working in all of those browsers, I'll fire up Netscape and see if it works there

-Sam

[SJH]

Ah yes, it's happening in Netscape 6.2.

In Internet Explorer 6.0.2 it's working fine.

No idea what the problem could be though, sorry!

-Sam

[redux]

Originally posted by Devilware.net
Yup... I resized the window and scrolled vertically as far as I could --

have a look at this screeshot [URL removed, as problem now solved] to see what i mean. horizontal scrolling causes this...

[SJH]

Yeah, read my post below that

For the record, it does exactly that in Netscape 6.2, and doesn't do it in IE6.

-Sam

[redux]

well, i couldn't really find an adequate solution to the problem above. the header div's content overflows the box, and i can't force the div to expand enough to cater for that...hmmm
stuck an overflow: hidden in the header div's style as a workaround to at least hide the flaw, but i'd be interested to hear any possible solutions (apart from assigning the background colour to the table contained within the div, as i plan on phasing that one out in favour of a table-less version at some point, which would mean the same problem all over again)

[KillAllDash9]

Well, I'm not sure if this would be considered a browser bug or just an inconsistency between the XHTML spec and the CSS spec, but I can tell you what's causing the problem.

In your CSS, you specify the width of the div with the id of 'header' as 100%, and this is also where you specify the background color. This div will be rendered as 100% of the width of your browser window, so that's as far as the background will go.

You then specify the table width with the traditional 'width' property in the tag.

See what happens if you give the table an id, say 'HeaderTable' and then specify the width and background color as part of the CSS for that id. That should at least cause the background color to be behind the table no matter how wide the div ends up being.

[Knightime]

Redux, can you send a link again so I can look at the source. There a couple of possibilities to look into that might help. I need to see the code though please. I couldn't get the page to load when I tried a couple minutes ago.

[dragonfly_7456]

Me neither