Nadine Misiaszek wrote: > http://www-rohan.sdsu.edu/~nmisiasz/test/page1.html > > The header tags of column 1 and column 2 line up in IE 6 but not in > Firefox 3. I tried some negative numbers for margin-top. Then > things work in FF but not in IE.
You're experiencing "collapsing margins"... <http://www.w3.org/TR/CSS21/box.html#collapsing-margins> ...where margins on the headlines (h2) are either contained by their containers, or they escape their containers and collapses into, or create, vertical margins on their respective parents and grandparents. Margins can't escape absolute positioned containers (#column1) but they can escape relative positioned containers (#column2), which is what causes the line-up problem. Nasty stuff, but in accordance with CSS specs I'm afraid. The difference between IE6 and non-IE browsers, is caused by different margin-defaults. IE has zero margin-top default on h2, while other browsers have a non-zero margin-top default. So, to equalize without having to hack browsers, you can zero out margin-top on h2 by adding... h2 {margin-top: 0;} ...and all browsers will agree and make those headlines and their respective containers line up where they should. Further vertical adjustment (if necessary) is best done by declaring a suitable padding-top on #column1 and #column2. regards -- Georg http://www.gunlaug.no ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
