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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't remove top-margin on body tag in firefox!

    I am using a repeating background image on the body tag to create a blue header bar across the top of the page. In firefox only there is a top-margin of 2px that produces a white gap that I just can't seem to get rid of. I've pasted my code below, any suggestions...?

    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="Macintosh HD New:Users:lukeocuments:luke torroni gdsrojects:AI Recruitment:website:styles.css" /> <link rel="stylesheet" type="text/css" href="Macintosh HD New:Users:lukeocuments:luke torroni gdsrojects:AI Recruitment:website:test.css" /> </head>

    <body>
    </body>
    </html>



    CSS:

    body {
    background-image: url(images/headercloudsrepeat.jpg);
    background-repeat: repeat-x;
    padding: 0px;
    margin: 0px;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try after adding
    Code:
    *{
    padding:0;
    margin:0;
    }
    to your CSS
    where * is the universal selector, which will make all default margin-padding values of all elemetns to zero.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No it's still there with the CSS as below. It's strange as there isn't even anything else on the page, no divs or other elements to mess with the layout.

    *{
    padding: 0px;
    margin: 0px;
    }

    body {
    background-image: url(images/headercloudsrepeat.jpg);
    background-repeat: repeat-x;
    padding: 0px;
    margin: 0px;
    }

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Can you post a link to your image so that we can also see the exact problem.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok here is the link to the background image which I want to repaet across the top of the page:


    And a screenshot of the problem... note the 2px gap at the top:

    Any ideas?

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    OK! I give up! Where's the link?

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It just displayed the images in the window above... can you see them?

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by torroni View Post
    It just displayed the images in the window above... can you see them?
    How are we expected to get your code from that?
    We need a URL

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    That actually looks part of the theme you have set on Firefox.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    It might just be the background placement. Try explicitly adding positioning to the body selector:

    Code:
    body {
      background: url(images/headercloudsrepeat.jpg) left top repeat-x;
      padding: 0;
      margin: 0;
      }
    Note also (which is kind of a picky thing) but you don't need to specify units when you set something to units--zero is zero in any unit. :P


  •  

    Posting Permissions

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