Topic: weird gap in css positioned page (Page 1 of 1)

ok, i've gone way out of my comfort zone, ditched the tables completely and coded a site in css problem is i have this odd gap in the center of my layout and i can't figure out why.

http://www.notdecaf.com/exit26/

any thoughts? thanks.

chris


KAIROSinteractive | tangent oriented

http://www.in-dented.com/temp/fig/exit%2026.htm

Some validation problems going on - I fixed them in the HTML posted.

Some odd things going on with non-xhtml compliant attributes, such as "align", which should be handled with the CSS.

I took out all "align" attributes, and I took out the 'position:relative;' for the bodyblock as it is unnecessary.

I added float:left to the content area, and added a br with a clear:all specified, which forces the body block to extend and contain the 'left' and 'cont' blocks. Without it, it assumes the floats don't need to be contained.

Didn't have the time to diagnos specifically what was causing the space, but with the code cleaned up, it seems to have gone away.

Hope that helps...

{{edit - ok, I rushed and I see that IE still has a bit of an issue.....hold on....

Hmm...well...I made the gap smaller

but didn't make it go away in IE. No time to investigate more at the moment...



(Edited by DL-44 on 11-17-2004 01:54)

(Edited by DL-44 on 11-17-2004 02:10)

Fig: You have encountered the phenomenon called margin collapsing. Essentially, any two margins that touch are merged into a single margin. The margin-top of the #bodyblock>#cont>p element touches that of the #bodyblock element, thus they merge. A 1px padding-top on #cont should fix this.

--
var Liorean = {
prototype: JavaScriptGuru.prototype,
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};

Either I misunderstand margin-collapsing, or that is incorrect.

The way I understand it, the margin of an element contained within the body block should have no effect on the margin of the containing element. The bodyblock div and the header div would be effected by margin collapsing, but not the bodyblock div and an element insde of it.

outstanding, thanks for the help DL. i found an online reference that had some sample layouts and tweaked one of those to get the positioning so that's probably where the "align" references came from.

appreciate the info liorean, i'm now curious how this exactly works. i'll do some playing and see what happens.

chris


KAIROSinteractive | tangent oriented

DL-44: No, the CSS specification is quite clear on that issue:

quote:

---

8.3.1 Collapsing margins


In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

In CSS 2.1, horizontal margins never collapse.

Vertical margins may collapse between certain boxes:

---

Fig: Read more on the issue at the page I linked above. You may also be interested in an article by Andy Budd called No Margin for Error.

--
var Liorean = {
prototype: HTMLGuru.prototype,
abode: "http://web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

(Edited by liorean on 11-17-2004 10:37)

Interesting - thanks liorean. I apparently missed the 'nested' part whe I first read through...


For the record, the padding didn't help though...

Hmm, a padding on #cont should have done it. Might be that moz gets that wrong though. Specifically changing the margin-top to a padding-top for that p element will work, at least.

--
var Liorean = {
prototype: XMLGuru.prototype,
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};

Liorean - mozilla/firefox have no problem with the code that I posted....just IE.

Haven't had anymore time to look through this yet - could be just a careless mistake....

Well, I was still talking about Fig's original code...

I can't help with iew at the moment - the drive holding my Windows partition on my PC died with a screeching awful noise (the kind that hurts your ears four hours afterwards) yesterday, and I haven't come around to installing everything anew yet. I'm on my Mac for the moment.

--
var Liorean = {
prototype: CSSGuru.prototype,
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};