Why doesn't this work in Opera?

Discussion in 'HTML' started by patrick j, Nov 25, 2006.

  1. patrick j

    patrick j Guest

    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.

    --
    Patrick
    Brighton, UK

    <http://www.patrickjames.me.uk>
     
    patrick j, Nov 25, 2006
    #1
    1. Advertising

  2. patrick j

    BootNic Guest

    > patrick j <> wrote:
    > news:
    > 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*
     
    BootNic, Nov 26, 2006
    #2
    1. Advertising

  3. patrick j

    patrick j Guest

    BootNic wrote:

    > 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.

    --
    Patrick
    Brighton, UK

    <http://www.patrickjames.me.uk>
     
    patrick j, Nov 26, 2006
    #3
  4. patrick j

    Joe (GKF) Guest

    In article <>,
    says...

    Tools > Preferences > Advanced > Fonts | Minimum Font Size


    --
    Please visit -
    Water saving tips: http://graspages.cjb.cc/bigdry/
     
    Joe (GKF), Nov 27, 2006
    #4
  5. patrick j

    Ed Seedhouse Guest

    On Sun, 26 Nov 2006 18:12:10 +0000, patrick j
    <> wrote:

    >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%20don't%20know.html

    .... and the rest of that site too. The Web is not paper.
     
    Ed Seedhouse, Nov 27, 2006
    #5
  6. patrick j

    Ed Mullen Guest

    Ed Seedhouse wrote:
    > On Sun, 26 Nov 2006 18:12:10 +0000, patrick j
    > <> wrote:
    >
    >> 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%20don't%20know.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.
     
    Ed Mullen, Nov 27, 2006
    #6
  7. patrick j

    patrick j Guest

    Ed Mullen wrote:

    > 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.

    --
    Patrick
    Brighton, UK

    <http://www.patrickjames.me.uk>
     
    patrick j, Nov 27, 2006
    #7
  8. patrick j

    The Major Guest

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

    --
    Chris Hughes
    "Reality is that which, when you cease to believe, continues to exist."
    http://www.epicure.demon.co.uk
     
    The Major, Nov 27, 2006
    #8
  9. patrick j

    Steve Pugh Guest

    The Major wrote:
    > 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, Nov 27, 2006
    #9
  10. patrick j

    Steve Pugh Guest

    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
     
    Steve Pugh, Nov 27, 2006
    #10
  11. patrick j

    Toby Inkster Guest

    patrick j wrote:

    > 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)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Nov 28, 2006
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. JezB

    Why doesnt this work in Opera ?

    JezB, Jul 8, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    525
    Curt_C [MVP]
    Jul 8, 2004
  2. Bob
    Replies:
    24
    Views:
    1,547
  3. Mr. SweatyFinger

    why why why why why

    Mr. SweatyFinger, Nov 28, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    913
    Mark Rae
    Dec 21, 2006
  4. Mr. SweatyFinger
    Replies:
    2
    Views:
    2,008
    Smokey Grindel
    Dec 2, 2006
  5. Gernot Frisch

    My menu doesn't work on Opera - can anyone help?

    Gernot Frisch, Apr 26, 2004, in forum: Javascript
    Replies:
    2
    Views:
    90
    Gernot Frisch
    Apr 26, 2004
Loading...

Share This Page