Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post

    Background gif on body tag peeking thru

    hi.

    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:

    http://radified.com/index.rad

    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:

    Code:
    section#mainContent {	
    	background-color: black;
    }
    the html there is:

    Code:
    <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.).
    Last edited by PonchoX; 05-10-2011 at 03:10 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Code:
    .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.

  • Users who have thanked SB65 for this post:

    PonchoX (05-09-2011)

  • #3
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    you *are* the man!

    thanks.

    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?)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •