Making a layer stretch to 100% of the page width

Forum Moderators: open

Message Too Old, No Replies

Making a layer stretch to 100% of the page width

cross-browser and valid code if possible

BlobFisk

4:34 pm on Mar 21, 2002 (gmt 0)

Hi All,

I'd really appreciate your help on this one.

I have a header layer which I want to have spanning the full width of the page. However, my CSS code (below) is not doing the job. There is always a small amount of white spave left to the right... Any suggestions?


#header { 
position:absolute; 
width:100%; 
height:50px; 
z-index:1; 
left: 0; 
top: 0; 
background: #336699; 
layer-background-color: #336699; 
border: none;
}

TIA,

BlobFisk

(edited by: tedster at 10:37 am (utc) on Mar. 25, 2002)

4eyes

4:51 pm on Mar 21, 2002 (gmt 0)

I'm no expert Blobfisk, but just wrestled with the same problem.

Strangely, the solution was to set my master page margins to zero (instead of merely not setting them at all)

It worked for me.

(but not on Netscape 4.X)

BlobFisk

4:55 pm on Mar 21, 2002 (gmt 0)

Thanks a million 4eyes, that seems to have fixed it in IE, Opera and NS6... however, it's still bloody there in NS4.

Ah well.....

piskie

10:18 pm on Mar 21, 2002 (gmt 0)

Try inserting both these in the body tag:
leftmargin="0" marginwidth="0"

NN4x prefers margin width.

BlobFisk

10:31 am on Mar 25, 2002 (gmt 0)

Thanks Piskie, that's done it.... but it's shot my validation....

piskie

11:13 am on Mar 25, 2002 (gmt 0)

Yes I noticed that but NN4x needs it and the same applies if you want no margin at the top of the page.
For the top you need both: topmargin="0" marginheight="0"

tedster

11:45 am on Mar 25, 2002 (gmt 0)

Related thread here: How do I get rid of the gap at the top of the page [webmasterworld.com]? It gets into validation, NN4-specific code and all that good stuff

BlobFisk

11:55 am on Mar 25, 2002 (gmt 0)

Thanks for the link Tedster.

It seems that for those of us still catering for NS4 we have to use some hacks to make things work to a true cross browser scheme.

Prehaps the best maxim is that if your code validates before you start adding your NS4 hacks in, then you're doing a good job!

For my original question, my code validated before adding in the margin properties into the <body> tag, and did not afterwards. I don't feel too guilty, it was a necessary hack for people still using NS4.

Thanks to all for their helpful replies, tips and comments. :)