Question

I noticed a strange behavior with the default font size option (I’m NOT speaking about the minimum font size under the advanced tab) under Firefox :
go to this page http://fr-region.xb83studio.ch/2012/lachen/ and put a default font size of 44px or higher. Can somebody explain why the second list drops under the first one ?
The texts inside have a font size specified, hence they aren’t modified by the default font size feature.

At first the problem occurred with a default font size of 17 pixels and higher. I reduced the width by 3px and it now works up to 40px. But I still don’t understand why this problem arises. I would really appreciate an explanation.

BTW, I’m running Firefox 12.0 under Windows 7 Professional SP1

Thanks for your ideas

René

Answer 1

You have two inline-block elements with width 207px and left-margin 32px each. They’re in a container with width 488px (573px width div containing a section with auto width, a 55px left margin, and a 30px right margin). In your markup, there is whitespace between the </ul> for the first inline-block and the <ul> for the second one, so in the rendering there is a space between them, just like between any two characters separated by whitespace. The width of that space is the width of a space character in the container’s font.

So the second list will wrap under the first one once 488px-2*(207px+32px) = 10px is smaller than the width of a space character in the container’s font.

If you earlier had your inline-blocks at 210px width, then the wrapping would happen once the width of a space is more than 6px; somewhere around a 17px font size sounds about right for that for typical variable-width Western fonts.