On Thu, 02 Oct 2008 09:32:33 -0700, Nadine Misiaszek wrote:
> I find a mysterious offset of 10 px in my 3-column layout, my first such
> layout.
>
> I have validated the HTML and the CSS. I used Firebug for another
> perspective. My
> column 1 header 2 has a mysterious offset of 10. I do not know where it
> comes from.
>
> 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.
>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Your column 1 is absolutely positioned, and the top margin on the H2
pushes it down by 11px. The margin-top on column 2 H2 pushes the
whole of #contentWrapper down, as it "pokes through" the top in
all browsers except IE.
Perhaps the simplest solution is to eliminate the top-margin on those
H2 elements. Add a margin-top to #contentWrapper to push it down
instead of relying on the H2 margin, viz:
#contentWrapper { margin-top: 1em; }
#contentWrapper h2 { margin-top: 0; }
It "works" in IE because #contentWrapper has a width defined on it.
This triggers the IE proprietary "hasLayout" feature, which "traps"
the margin-top on the column 2 H2 (among other non-standard
behaviors.)
I hope this hasn't confused you further.
Cordially,
David
--
______________________________________________________________________
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/
