3
.myDiv  
{

background-image: url(urltomyimgheader);

height:100px;

margin: auto;

position:relative;

top:-10px;

width:600px;

}

This is a simple div tag used to display the logo...

I have made the top -10px to make it touch the top of the browser where unless there is a gap between the logo and the page.

However i feel bad about using the -10px to position the div :( Is there a better and cross browser compatible solution?

2 Answers 2

3

@Tatu Ulmanen is right that this is a browser default issue. You shouldn't have to add negative margins, you simply need to set the default CSS attribute of the body/html tags.

Just to be safe you should be using a CSS reset to get rid of Browser styling defaults anyways. Here's the code you can use to solve your problem. Below that is a nice CSS Reset you can add to the top of all your CSS stylesheets from here on out.

html, body {
padding: 0;
margin: 0;
}

CSS Reset: /* Reset */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td
                        { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
    blockquote:before,
    blockquote:after,
    q:before, q:after   { content: ""; }
    blockquote, q       { quotes: "" ""; }
    body                { line-height: 1; color: black; background: white; }
    caption, th, td     { text-align: left; font-weight: normal; }
    :focus              { outline: 0; }
    table               { border-collapse: separate; border-spacing: 0; }
    ol, ul              { list-style: none; }
1
  • Thanx a lot! :) Never knew the reset style sheet was this important :) Apr 21, 2010 at 17:36
1

Yes, the 10px gap is generated by default paddings of the browser for certain elements.

body {
   padding: 0;
}

You might also want to look into CSS reset stylesheets to reset all browser specific settings for elements. Here's a good one.

1
  • Thanx Tatu :) I have seen the Reset style sheets many time but i got to know the importance only now :) Apr 21, 2010 at 17:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.