Why doesn't this work in Opera?

[patrick j]

Hi

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 CSS is here:

<http://www.patrickjames.me.uk/mylifestyles.css>

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.

This produces perfect alignment on the left with every browser I've
tried except Opera.

As an aside IE6 has a conditional comment specifically for it which has
fixed width declarations in a separate style-sheet.

 

[BootNic]

news: (e-mail address removed)
Hi

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?

minium font size


[snip]

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.

My Webpage Normal text = 14px
My minimum font size = 14px
nav001 suggest font size 11.2px, my font size 14px
nav002 suggest font size 9.8px, my font size 14px

nav001 max-width = 52.5em, wider then 42em
nav002 max-width = 60em, wider then 42em

This produces perfect alignment on the left with every browser I've
tried except Opera.

This sample has the same issues in my FF as my Opera for the same
reason.

Suggested fix:
leave the font-size on the UL at 100%, set the max-width to match
your mainstuff max-width. If you wish to suggest a font-size of
80%/70%, set it on the UL LI, then make what ever adjustment you may
need to the rest of the css.

--
BootNic Saturday, November 25, 2006 11:03 PM

It is well known that "problem avoidance" is an important part of
problem solving. Instead of solving the problem you go upstream and
alter the system so that the problem does not occur in the first
place.
*Edward de Bono*

 

[patrick j]

My Webpage Normal text = 14px
My minimum font size = 14px
nav001 suggest font size 11.2px, my font size 14px
nav002 suggest font size 9.8px, my font size 14px

nav001 max-width = 52.5em, wider then 42em
nav002 max-width = 60em, wider then 42em

Well firstly, thank you for your help. I didn't realise I had a problem
when people's browsers are set with a minimum font-size. I've now
checked this out of course with FireFox and I see that if a minimum
font-size is set then all goes wrong as you've described

You've pointed out a problem I didn't know I had. However I don't think
this is necessarily the problem with Opera, though it might be.

This sample has the same issues in my FF as my Opera for the same
reason.

The strange thing is that while it was going wrong in Firefox set with
the minimum size exactly as one would expect it wasn't going wrong in
Opera in the same logical way.

Before changing it I took this screen grab of the area viewed in Opera:
<http://www.patrickjames.me.uk/operaview.png>

The first navigational list with the link "Hello" as first item is
indented as one would expect with a minimum font-size set, the font in
that is 80% and so extra ems were added to align it with the body of
the text, so if it is then viewed with a browser with a minimum
font-size then it will be indented.

However the next navigation list with first item "My Moultons" has the
font set to 70% and so I'd expect it to be indented yet further, but it
isn't, it is indented, but not as much.

The other point in my "case against" Opera with a minimum font-size
being the problem is that the fonts as you see in the pic are scaled as
described in my own style-sheet, so it suggests that Opera is not
defining a minimum font-size.

I'm afraid I'm very ignorant about the Opera browser and I've been
looking at the pref's for a minimum font-size setting but I can't find
it. It could be there and very obvious but for the present I can't see
it.

Suggested fix:
leave the font-size on the UL at 100%, set the max-width to match
your mainstuff max-width. If you wish to suggest a font-size of
80%/70%, set it on the UL LI, then make what ever adjustment you may
need to the rest of the css.

I tried this, but the horizontal lines on the web-page created by the
UL would become too fat. Oddly enough this would happen in a variable
way with different browsers.

For the time being I've set the max-width for the different block
elements discussed using px which I know is less ideal than em but it
does sort out this particular problem. I'm going to look into this more
thoroughly when I get chance.

 

[Joe (GKF)]

Tools > Preferences > Advanced > Fonts | Minimum Font Size

 

[Ed Seedhouse]

Well firstly, thank you for your help. I didn't realise I had a problem
when people's browsers are set with a minimum font-size. I've now
checked this out of course with FireFox and I see that if a minimum
font-size is set then all goes wrong as you've described

You've pointed out a problem I didn't know I had.

This should be read *first* by anyone who wants to do web design, in my
opinion:

http://pages.prodigy.net/chris_beall/TC/You don't know.html

.... and the rest of that site too. The Web is not paper.

 

[Ed Mullen]

This should be read *first* by anyone who wants to do web design, in my
opinion:

http://pages.prodigy.net/chris_beall/TC/You don't know.html

... and the rest of that site too. The Web is not paper.

Nice link; thanks.

There will always be arguments about Web design. Especially regarding
javascript, Flash, and other modern technologies. But the basics are
the basics: it's NOT print media. A Web page designer cannot control
the presentation at the end-user level: Not in any meaningful way,
ever. Trust me, if you can design it, I can break it at the local level.

This IS a different medium, it is NOT print. Make it fluid, let it flow
for each user. Yes, there will always be some users who are so beyond
the edge that your design breaks. Most won't if you understand the medium.

The only way you can ensure that the user sees what you intend is to
make your page one big picture file. And that won't work either since
every browser will give some control to the user over images. So, stop
thinking print and start thinking fluid design. Google it if you don't
know what that means. The Web is text based, even more basically,
text/code based. And I (we) can control how our browser/eyes render
your craftiest design. Which won't be how you thought it out. Unless
you know the medium for which you are designing.

If you're contemplating these issues see these newsgroups:

alt.html
comp.infosystems.www.authoring.stylesheets

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
All I ask is that you treat me no differently than you would the King.

 

[patrick j]

A Web page designer cannot control
the presentation at the end-user level: Not in any meaningful way,

It would be great if people would look at my original question and
consider what I actually asked instead of endlessly repeating this
lecture about fluid design.

I know all about fluid design. The problem I was writing about wasn't a
result of trying to create a fixed design of some sort.

 

[The Major]

All lines up left perfectly in Opera for me... (v.9.02 or 9.10 b8660)

 

[Steve Pugh]

All lines up left perfectly in Opera for me... (v.9.02 or 9.10 b8660)

What does? (hint: quote what you are replying to, as you have no way of
knowing whether the earlier messages are available on any given
server).

If you mean the OP's page at
http://www.patrickjames.me.uk/bicycle/mymoultons.html, then it now
lines up because the OP has replaced the em widths with pixel widths.

Steve

 

[Steve Pugh]

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

 

[Toby Inkster]

I'm afraid I'm very ignorant about the Opera browser and I've been
looking at the pref's for a minimum font-size setting but I can't find
it. It could be there and very obvious but for the present I can't see
it.

Preferences > Advanced > Fonts > Minimum font size

(Opera 9, Linux)