6 replies [Last post]
CartoonSmart
Offline
Regular
Last seen: 7 years 12 weeks ago
Timezone: GMT+2
Joined: 2006-06-30
Posts: 27
Points: 0

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!

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 13 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Add height:1%; in #content

Add height:1%; in #content to set hasLayout

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 22 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

CartoonSmart
Offline
Regular
Last seen: 7 years 12 weeks ago
Timezone: GMT+2
Joined: 2006-06-30
Posts: 27
Points: 0

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?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

* html #element {height:

* html #element { height: 1%: }

should do the trick

Verschwindende wrote:
  • CSS doesn't make pies

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 22 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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.