Hello all,
OK. Just for fun, I'm writing a two column layout with a header at the top,
just to see if I can sit down and write it from scratch (as opposed to
copying a template). It basically consists of a header, right column and
left columed wrapped in a wrapper <div>. It all seems to line up, but it
also seems to have a quirk.
See here: www.sayatnova.com/frameless.htm. View the source to see the code.
It validates.
In IE the height of the left column, which would house a menu, is
significantly smaller than the right column - even though they both consist
of only a <p> tag with three words. Both of the <div>'s have 5px padding.
You can see that the right column obviously has much more than 5px of
top/bottom padding. I kind of expect both <div>'s to look like the left
column (menu div).
In Firefox, both div's are of equal height, but they both have significant
top/bottom padding, even though I specify only 5px.
I've tried setting height: auto and tried leaving the height spec out
altogether, but the behavior doesn't change. Also, I was suspicious of any
margins of the <p> tag but, assuming that IE applies some sort of default
margin to <p>, that would affect both <div>'s, not just one. What am I
overlooking? Is it an IE bug? Something in my CSS?
Again I'm just experimenting to learn. In the past, I've just copied 2 colum
layouts from CSS tutorial sites. I just want to try and write one from
scratch.
--
Viken K.
http://home.comcast.net/~vikenk