Sun, 2007-03-25 18:06
I made this floated three-column layout...
Check www.lb-security.nl/temp.html
Now in IE 6 the text in the middle 'content' box isn't properly aligned with the other columns. Why is this? Firefox doesn't seem to have this issue.
The mark-up (CSS follows below)
Hugo wrote:
cartoonsmart with 14 posts you should know how to post using code tags for display of code snippets, please do so thanks.
Hugo.
Sorry Hugo!
Sun, 2007-03-25 18:18
#1
Add height:1%; in #content
Add height:1%; in #content to set hasLayout
Sun, 2007-03-25 18:45
#2
To answer the why is
To answer the why is this:
IE mishandles margin collapsing when hasLayout has not been set. The first paragraph in each column (which should probably be an hx, btw) has a default margin of 1em 0. The two floats have hasLayout by nature of the defined width (if not the float itself). So the outer columns collapse the margins correctly, but the center content column doesn't. This can be seen by setting the p in #content to margin: 0 0 1em 0; but this is only address the symptom, whereas DanA's solution corrects the problem. Oh, you want to feed only IE the 1% height.
Sun, 2007-03-25 18:51
#3
cartoonsmart with 14 posts
cartoonsmart with 14 posts you should know how to post using code tags for display of code snippets, please do so thanks.
Hugo.
Sun, 2007-03-25 22:57
#4
DanA wrote:Add height:1%; in
DanA wrote:
Add height:1%; in #content to set hasLayout
Thanks a bunch that did the trick!
wolfcry911 wrote:
To answer the why is this:
IE mishandles margin collapsing when hasLayout has not been set. The first paragraph in each column (which should probably be an hx, btw) has a default margin of 1em 0. The two floats have hasLayout by nature of the defined width (if not the float itself). So the outer columns collapse the margins correctly, but the center content column doesn't. This can be seen by setting the p in #content to margin: 0 0 1em 0; but this is only address the symptom, whereas DanA's solution corrects the problem. Oh, you want to feed only IE the 1% height.
Is this a socalled Box Model hack?
Oh yeah, I just added height:1% to the script. I doesn't seem to change anything in firefox, nor Opera. But to be on the save side what line can I add so only IE will process the script?
Mon, 2007-03-26 12:18
#5
* html #element {height:
* html #element {
height: 1%:
}
should do the trick
Mon, 2007-03-26 14:13
#6
TPH is correct in the * html
TPH is correct in the * html hack to feed IE (<7) only.
I must make a correction on my statement, however. I was right in that IE mishandles margin collapse in many cases, but I was wrong in saying that setting hasLayout (as DanA suggests) corrects the problem. It will align the text from column to column, but it is not in the correct location. You'll notice a difference between IE and FF. Firefox shows a greater space between the border and padding and the first paragraph, because with either padding or border set on a parent, the child's margin will begin from that point. But in IE, the paragraph begins closer to the border, showing an incorrect behavior.
I was also wrong in stating that you must feed IE only the height: 1%, what this does is set the hasLayout as mentioned but because the div's parent has no set height, the height: 1% can't be calculated in FF and therefor doesn't come into play. It may still be a good idea to feed only IE that rule however.
Please, if someone has further insight or cares to correct me, I'm all ears.