Strange behavior - need help (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

pcguy -> Strange behavior - need help (5/23/2008 11:04:11)

Hi all,

I have a backround image defined here:
body, html {
height:100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FFFFFF;
background-color: #000000;
background-image: url(images/background.jpg) repeat-y top;
margin: 0px;
padding:0px;
}

The problem is, my main content is in a centered table, and each page obviously has different amount of content...the weird thing is, the background image shifts up and down a bit on each page, depending on how long the table is (with content).

If I manually put in a bunch of <p> tags so each table exceeds a certain height, the background image is fine, and doesn't move...

But I need it to stay in the same place no matter the table content....

Any ideas????

Thanks!



jaybee -> RE: Strange behavior - need help (5/23/2008 16:23:41)

quote:

body, html {
height:100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FFFFFF;
background-color: #000000;
background-image: url(images/background.jpg) repeat-y top;
margin: 0px;
padding:0px;
}


Ideally a link to the page is easier.
First off, why height 100%? 100% of what? It makes no sense to specify 100% of something which is variable.
Repeat-y top? you don't need the top. It automatically starts at the top.

Try this:

body, html {
margin: 0;
padding:0;
border:0;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FFFFFF;
background-color: #000000;
background-image: url(images/background.jpg) repeat-y;
}



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875