• Locked
4 replies [Last post]
Sun, 2007-09-23 19:29
RRRalph
Offline
newbie
Last seen: 15 years 18 weeks ago
Joined: 2007-09-23
Posts: 3
Points: 0

I'm new to XHTML and the actual true standards-compliant issues, and I'm having a bit of a problem.

Link: http://www.normalgeeks.com/wink

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.

Any ideas?

Thanks,
Ralph

Top
Tags:
Sun, 2007-09-23 20:11
#1
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Top
Sun, 2007-09-23 20:21
#2
RRRalph
Offline
newbie
Last seen: 15 years 18 weeks ago
Joined: 2007-09-23
Posts: 3
Points: 0

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...

Top
Sun, 2007-09-23 20:53
#3
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Please Google css margin

Please Google css margin collapse. Check Eric Meyer's article for sure.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Sun, 2007-09-23 21:30
#4
RRRalph
Offline
newbie
Last seen: 15 years 18 weeks ago
Joined: 2007-09-23
Posts: 3
Points: 0

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.

Top
  • Locked