I'm new to XHTML and the actual true standards-compliant issues, and I'm having a bit of a problem.
The issue is with the gap below the header, although I think it's technically above the #main div, because I took out #header, and the gap was still there.
The only thing I found that would "scrunch" up the #main div is if I added a 1px border, but this is not an option.
Without looking and based on
Without looking and based on the fact that border cured the problem it sounds as though you have a collapsing margin issue, you need to control margins and many other properties in CSS likely you have an element that has default margins set, the top margin of which is merging with it's parent and canceling it giving the effect that it protrudes through the top of the parent, setting a border is one means of preventing margins collapsing, floating is another as well as padding, removing the offending margin also a possibility; IE on the other hand can be a whole nother story.
I don't know if it's a
I don't know if it's a collapsing margin issue, but I kept playing, and it seems the issue goes away if I set display: inline on the divs inside, but then it kills my padding.
I put some text right inside the main div, and the page structure didn't change, but it put the text right in that space. It seems that it's reserving the space for text when there really is none...
Please Google css margin
Please Google css margin collapse. Check Eric Meyer's article for sure.
Hugo & kk5st, You were
Hugo & kk5st,
You were absolutely correct. I couldn't find the collapsing margin issue because I was looking at the wrong elements. I was setting all divs to zero and still getting the issue. It turned out to be my h1 element shooting out the top. Sorry for my hesitation to admit it was collapsing margin, it just took me a while to find the troublesome element. You guys are awesome, thanks.