SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS - White border around header??

    Hi - I've been trying to create a header in CSS so that it is flush to the top and sides of the browser window however I seem to get a white border around it when I try - does anyone have any ideas what i'm doing wrong please?

    My CSS looks along these lines:

    #header {
    width: 100%;
    height: 150px;
    background-color: #428EC5;
    padding: 0;
    margin: 0;
    border: 0;
    }

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I assume you have set the html and body margins and padding to zero also.

    Code:
    html,body{margin:0;padding:0}
    Or did you mean something else

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant thanks! I'd only set the body and not the html as well!

  4. #4
    whagwan? silver trophybronze trophy akritic's Avatar
    Join Date
    Nov 2006
    Posts
    2,780
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Im interested to know in what brower you have to set the html margin to
    zero in order to 'flush' the site with the browser's viewport.

    I use Opera and have not had to set the html in order to achieve this
    effect.

    Cheers,

    andy

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Im interested to know in what brower you have to set the html margin to
    zero in order to 'flush' the site with the browser's viewport.
    It's not really a case of which browsers do apply styles to html but more a case of that browsers might apply styles to html either now, in the past, or in the future.

    I don't know if any browsers do actually style html at present but it was commonly thought that Opera applied margin to html but that seems to have been a mistake as Opera applies padding to the body and not margins to either html or body.

    With css you need to control things explicitly and therefore html,body {margin:0;padding:0} is a "catch-all" and you don't need to know what browsers may or may not have margin/padding applied because you have taken control and not the browser.

    However I usually use *{margin:0;padding:0} and do a global reset anyway (although some say this slows the browser down but as yet no-one has shown any evidence that this is true)

    Some interesting info here and here:


Bookmarks

Posting Permissions

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