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.
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,
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.
04-07-2013, 02:42 AM
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.
04-07-2013, 11:19 AM
Yes, this was the problem and it works fine now. Thanks.