CSS or HTML Problem?
I have a test page for a website where I am having problems positioning the "Content" area. The only thing in the content ares is an H1 tag. Because of this H1 tag, the content area is being pushed down 15 pixels. If I remove the H1 tag, the content area pops back into place.
I have spent about a day deleting things from the web page and CSS file until I have the bare minimum to show the problem.
I would sure appreciate it if someone could tell me what is causing this problem.
Both the HTML and CSS code have been W3C Validated.
Here is the website: http://www.lawrence-nv.us/Molly/test/
Here is the HTML code:
Here is the CSS code:
<title>Molly Murphy - Henderson Symphony Orchestra</title>
<meta name="description" content="Fine Art Director, Symphony Orchestra Director, Music Teacher, Henderson, NV, Las Vegas">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="../css/navstyle.css">
<div id="navigation"> <!--#include virtual="../includes/nav2.html" --> </div>
<h1>- Henderson Symphony Orchestra -</h1>
</div><!-- /content -->
</div><!-- /page -->
</div><!-- /top -->
margin : 0;
padding : 0;
position: relative; left: 0px; top: 0px;
height: 45px; z-index: 10;
It's a CSS problem, this'll fix it
You're using the default margins for h1, which includes that 15px top margin you're seeing. If you change your h1 to margin-top:0 you'll eliminate it.
...then the answer to the next question is...
Remove the forced 45px height on your #navigation div.
Thank you both for solving my problem.
My question now is why does the top margin of the H1 push the content DIV down rather than just moving the H1 down on the content page?
I have never run into this problem before.
It has to do with "Collapsing Margins", though I confess I don't understand the whys and wherefores of it all...
The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
Thanks again Dave,
Originally Posted by tracknut
I have designed about 30 or so websites over the past years and have never run into this problem before. I did a quick read of the link you provided and it is a little confusing. I am going to have to read this again to see if I can understand it.
Edit: In reading the link again, I may not have run into this before because I have used a lot of absolute positioned boxes. On this website I thought I would see how far I could get by using relative positioning.
Yeh, I think iBeZi is right problem in css. You're using the default margins for h1, which includes that 15px top margin you're seeing. If you change your h1 to margin-top:0 you'll eliminate it.
Yes, this was the problem and it works fine now. Thanks.