View Full Version : Resolved Background gif on body tag peeking thru

05-09-2011, 05:47 PM

i converted my xhtml home page to html5 this weekend, using a handful of new semantic elements. i aimed to keep my page styling and layout the same, merely tweaking my previous css styles to target the new elements (.. header, footer, nav, section, article, aside, etc.).

after much wrangling, i have one small display glitch i cant figure out.

since css is designed to style any structured page, including xml, where we can create our own elements, it seems to be a matter of css.

at the top of my home page:


in the CENTER section, right below the white <header> and right above the horizontal tabbed navigaton, if you look closely, you can see a thin strip of the background gif (assigned to the <body> tag) peeking thru.

[ you can see the background gif running vertically outside the blue-green sidebars ]

this wasnt there before, so i know it's possible to elminate. (everything was laid-out with <div>'s before in XHTML.)

that center area is a <section id=mainContent> tag that contains the navigation => <nav id=mainNav>

i have already set the CSS thusly:

section#mainContent {
background-color: black;

the html there is:

<section id=mainContent class=column role=main>
<nav id=mainNav>

how might i eliminate that background gif (on the body tag) from peeking thru there?

i tried a few things with padding & margins & backgrounds on the <section> and <nav> tags, but that didnt work.

it's not a big display deal, but i dont like to NOT be able to figure something out.

nothing is peeking thru at the bottom, and the <section> element runs all the down to the <footer> (.. tho there IS a small gap down there .. between the sidebars <aside> and <footer>. that wasnt there before, either. so that kinda makes me thnk the problem at the top has something to do with the <nav> element.).

05-09-2011, 08:18 PM
.liquidElasticHybrid #wrapper {
background-color: black;
border: 1px solid black;
margin: 0 auto;
width: 92%;

should do it. #mainContent doesn't extend high enough to affect that area.

05-09-2011, 11:02 PM
you *are* the man!


simple to figure out .. AFTER you've been shown how to do it.

would you also happen to know how i could eliminate the small gaps between the blue-green sidebars and footer?

i'm guessing it has something to do with padding.

(or maybe i should post a separate entry for that?)