.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?
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.
@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; }