David Bailey wrote: > Hi, > > I am having trouble with a footer that's not behaving the same in > Safari and FireFox (Mac). I haven't been able to check it out in IE > Win as my pc is not working at present. > > http://www.dab-hand.co.nz/NZCFBS/3col.html > http://www.dab-hand.co.nz/NZCFBS/styles/main.css > > The problem I'm having is with the footer and particularly with the > left and right panels divided by a vertical stripe (border). The > right-hand-column of text is a definition list. > > 1. If I float the right hand panel right and put a 20% right margin > in order to move the text to the center of the right column: > Safari looks fine, and it behaves as I want it to > FF sends the text right over to the right, and the margin is very > small?nothing like the margin on the left-hand-column, which I think > is 15%. > > 2. If I float the right-hand-panel left and put a 20% margin on the > left-hand-column in order to move the right-hand-column text to the > center: > FF looks great > Safari drops the whole right-hand-column down under the left-hand-column > > 3. If I leave the right-hand-column to default (no float) > Both FF and Safari the text is sitting in the right place, but it > looses the structure of the definition list. > > I am at a loss as to what is happening here, and all my experimenting > is to no avail. Clearly, I am missing some vital point about css, but > the fact that FF and Safari behave so differently is confusing me, > and why I loose the dl structure when both browsers are consistent > also baffles me. I'd hate to think what it does in IE 5, 6 and 7! > > Help, guidance, advice?much appreciated. > > David
Hi David I have seen the page in IE7 and Opera and I would say that Safari is rendering the same as these browsers. If you give a float without a width a horizontal margin that is a percent, then Firefox and Mozilla will handle this different to all other browsers. When a float does not have a width then any horizontal margin (any side) that is a percent is calculated as part of the 100% that you are offsetting. The 100% in total is the width of the float caused by it contents combined with the horizontal margins of the float. This can be seen in this quick test [1]. In IE and Opera any horizontal margin (any side) that is a percent is calculated from the width of the container instead. So this leave you with these options. 1) Give a %, em or px width to the float(s). 2) Give a em or px width for the horizontal margin of the float. I haven't checked the specs to see which rendering is right, but the way FF handles is seems bazaar. [1] <http://css-class.com/test/floatswithpercentagemargins.htm> Kind Regards, Alan ______________________________________________________________________ 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/
