• 0

Body tag not starting at top of page


Question

I am using masterpages in asp.net to theme a site. When i try to view the page in Chrome/FF, the body contents start 180px down the page. I can fix it by setting the top to -180px in css but that seems wrong. I have included a screen shot of the problem. The bgcolor & img are aligned correctly, but the contents are not. I set the body height to 10px so it would be easy to see in the screencap of chromes debugger.

Here's the css I have so far:

*

{

position:relative;

margin:0;

padding:0;

border:0 none;

font-family:'trebuchet ms', sans-serif;

font-size:9pt;

}

body

{

background-color: #1EB9E9;

background-image: url('images/bg.jpg');

background-repeat: repeat-x;

background-attachment: fixed;

background-position: -95px 0px;

position: relative;

display: block;

padding: 0px;

margin: 0px;

left: auto;

right: auto;

text-align: center;

width: 100%;

}

#main

{

background: #FFFFFF url('images/contentBg.jpg') no-repeat scroll center top;

width: 713px;

height: 800px;

margin: 0 auto;

}

#content

{

margin: 180px 110px auto;

}

Anyone know the proper fix?

post-8087-0-10182500-1294937456.jpg

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

ummm.....

 #content
 {
 margin: 180px 110px auto;
 }

you have a top margin on your content of 180px, set it to 0 :unsure:

DOH!!!! Totally overlooked that pinch.gif

biggrin.gif Thanks for helping. sometimes it just takes some fresh eyes

Link to comment
Share on other sites

  • 0

Not really related to your issue, but I would avoid using the * element when writing 'reset' styles. Oddly, it takes longer to process the * element, rather than a delimited list of many elements. Also, the * affects literally every element on your page, including things like form elements which may react strangely to having their margins and paddings stripped.

I tend to use the reset styles found in Blueprint's framework:

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

It's only 9 lines long, and easier to make a adjustments to based on the base style you want for a website.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.