Combating browser margin at the top?

Discussion in 'Web Design and Development' started by RobertD63, Aug 16, 2010.

  1. RobertD63 macrumors 6502

    Joined:
    Feb 17, 2008
    Location:
    A place
    #1
    I'm building a test page just to learn the whole process from start to finish, rather than little bits of tutorials. I've hit a stop though, I can't seem to get the margin at the top of the page to go away. I'd like to be filled with my header color. This is HTML5 by the way.
    I have nothing in my header as of now:
    [​IMG]
    HTML:
    <header></header>
    And this is the CSS:
    Code:
    header {
    height: 110px;
    width: 100%;
    background-image: url(images/header.png);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(43,62,253)), to(rgb(63,117,255)));
    }
    
    I plan on making this work in everything but IE for now. I just want to get CSS down, and worry less about IE. Also, I can't figure out how to get it to span the whole page. I'd like the nav bar to go from edge to edge. Any help is appreciated.
     
  2. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #2
    Hi :)

    Have you tried margin:0; in there? Or a margin:0;padding:0; on body? not sure if these will help in your case ... but worth a shot.

    Can you give us a link to the page so we can have a fiddle, or post attach the page + css?

    Cheers

    /Doug
     
  3. RobertD63 thread starter macrumors 6502

    Joined:
    Feb 17, 2008
    Location:
    A place
    #3
    Sure, heres a link to the page. I never thought about adding it to the body. I tried and it worked for the most part. Now there is a slight gap on the right side on the header. Any clue?
    Thanks! :D
     
  4. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #4
    Sorry, you've lost me - I see the attached - uniform margin (8px) around the items, not more on the right.

    /Doug
     

    Attached Files:

  5. RobertD63 thread starter macrumors 6502

    Joined:
    Feb 17, 2008
    Location:
    A place
    #5
    Ah, if you look now, I updated the CSS to what I'm looking at.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Add "display: block;" to your header tag. Browsers are not HTML5 ready just yet so they don't know header is a block level tag.
     
  7. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #7
    Yeh, the site only displays correctly in Safari at the moment.

    Also, margin: -16px; for your nav is pulling the right side out of the box, giving you the impression there is a right margin on the header. Change it to margin-top: -16px;

    /Doug
     
  8. RobertD63 thread starter macrumors 6502

    Joined:
    Feb 17, 2008
    Location:
    A place
    #8
    Ahh makes sense, thanks for that!

    Ooops! I over looked that, thanks for that. I was wondering why it was overflowing.
     
  9. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #9

Share This Page