Html – css: body color not extending all the way down the page

csshtml

I'm specifying a teal background color for the body of a page:

<body style="background-color: #0197B1">

This overrides a style sheet, and sure enough the teal appears, but not all the way down the page (both in Firefox and Chrome)

I add the following at the bottom:

 <br style="clear:both" />
  some text
 </body>

to attempt to resolve things and also debug what is occurring with the inline element at the bottom. It appears (Chrome developer tool) that the body does not go all the way down the page. Hmm … why does this happen, what's the fix?

Page can be viewed at: http://www.momentumnow.co/testimonials

Thanks

Best Answer

Remove the height: 100%; property on the body (it's set in the CSS) and the background will fill the entire page. Also, as a friendly note, you shouldn't be using tables to design websites. It's very poor practice - what you want to do is easily achievable without tables.

Related Solutions

Html – CSS3’s border-radius property and border-collapse:collapse don’t mix. How to use border-radius to create a collapsed table with rounded corners

I figured it out. You just have to use some special selectors.

The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

Now everything rounds properly, except that there's still the issue of border-collapse: collapse breaking everything.

A workaround is to add border-spacing: 0 and leave the default border-collapse: separate on the table.

Css – IE8 CSS Body background color

A couple things to try.

Toy with the load order of your css files. Whatever is loaded last will be the style if you don't specify !important
Inspect your rendered html for inline <style/> blocks as they could be causing trouble and not show up in the style tab as a specific css file.
When in doubt target background-color directly as background will sometimes be overridden by a background-color property body{background-color:#e6e6e6}
If that doesnt work you could force override it with body{background-color:#e6e6e6 !important}.

Best Answer

Related Solutions

Html – CSS3’s border-radius property and border-collapse:collapse don’t mix. How to use border-radius to create a collapsed table with rounded corners

Css – IE8 CSS Body background color

Related Topic