Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firefox renders incorrectly after font resize

    I have constructed a fluid page using absolutley positioned divs, all those divs not fluid have a width set by px.

    The page is essentially a 3 column layout with a navbar on the left div, the main content on the centre div and a few logos on the right div.

    For accessability and w3c compliance i have a 'text size + -' toggle which calls a javascript to resize all fonts (within the var array='') to 80, 90 or 100% of their size.

    All works fine in IE7, all text that is too long to fit into a div is wraped onto the next line with the div expanding vertically to accomodate this

    eg

    | this is how my |
    | text displays in |
    | IE7 |

    BUT

    when resized in Firefox, it fails to wrap the content onto the next line to keep it within the set width of the div.

    what happens is the text extends past the edge of the div

    eg

    |this is how my te|xt displays in Firefox
    | |
    | |

    Also

    after resizing, on hover (over a link within this navbar) only half the word highlights as set with ".navbar A:hover" in my style sheet

    eg (caps = highlighted characters)

    before resize:
    HIGHLIGHTED

    after first resize:
    HIGHLIGHted

    after second resize:
    HIGHLighted

    it appears that the only characters highlighted are those that appear within the width of the word before resize.


    I am stumped, everything is fine in IE7.

    Any suggestions or advice would be greatly appreciated

    Many Thanks
    James

  • #2
    New to the CF scene
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by james_littler View Post
    when resized in Firefox, it fails to wrap the content onto the next line to keep it within the set width of the div.
    I don't see the issues in Firefox that you are mentioning. Have you changed the page? Where should I look?

    On the other hand I have some other suggestions.

    Usually it is best to avoid setting an explicit height in pixels for boxes that contain text. They don't resize in most browsers (including IE and Firefox) as one zooms the text. This leads to text spilling out of its box.

    It is somewhat better to set the height using the em unit. At least the box will resize under text zoom in IE and Firefox. But still, if the box holds an unknown amount of text, then one doesn't always know what height to set. Therefore it may be better to leave the box at height: auto. However, you can use the min-height property if you want to impose restrictions on the minimum height.
    Quote Originally Posted by james_littler View Post
    For accessability and w3c compliance i have a 'text size + -' toggle which calls a javascript to resize all fonts (within the var array='') to 80, 90 or 100% of their size.
    I would question whether such a control is needed. In my opinion such a control belongs in the browser and not on the web page. Indeed most browsers have a built-in function to zoom the text. I have a feeling that the toggle-text-size button is one of those buttons that are never used just like the 'Bookmark this page'-button.

    I don't think that moving all the browser controls back into the web page is the way forward. It just adds clutter to the page. Besides that, on every new website that one visits one would have to look for those buttons each time.

    Instead, you could inform the visitor how he/she can scale the text using the built-in functions in the browser. I have seen that on several sites. In that way you would even teach the visitor how to scale the text also on sites that don't have such a toggle-text-size button.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •