Posted by Steve Pugh on 11/27/06 11:50

patrick j wrote:

> I'm wondering why my horizontal navigation lists don't align at the
> left in Opera as they do in IE6, IE7, Safari, Firefox and iCab?
>
> A URL with both of the horizontal lists is here:
>
> <http://www.patrickjames.me.uk/bicycle/mymoultons.html>
>
> The link for "Hello" should align with the link for "My Moultons" and
> both of these should align with the text in the main part of the
> web-page.

> The font size for the body is 100% but in the navigational lists it is
> reduced to 80% and 70%.
>
> The max-width for the main part of the text is 42em and the max-width
> for the first navigational list is with 80% text size is 52.5em, the
> max-width for the second navigational list with 70% text size is 60em.

Opera is rounding the font size to the nearest pixel before calculating
the em widths.

Assuming a 16px browser default font size

16 * 0.8 = 12.8 which Opera rounds down to 12px.
16 * 0.7 = 11.2 which Opera rounds down to 11px.

12 * 52.5 = 630px
11 * 60 = 660px

Always rounding down is a long standing bug in Opera.
Using rounded values for the computed font size when calculating other
lengths defined in ems is another bug.

See http://steve.pugh.net/articles/opera-bug-compfntsize-rounding.html
for a demo and discussion.

I would suggest that the bets fix is to let both UL elements have the
same font size and set the same width in ems. Then apply font sizing to
the LI or A elements instead.

Steve

[Back to original message]