...

View Full Version : Firefox renders incorrectly after font resize



james_littler
05-31-2007, 11:40 AM
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

james_littler
05-31-2007, 12:09 PM
LIVE EXAMPLE HERE

http://www.ats-heritage.co.uk/div/template.html

koyama
06-02-2007, 11:12 AM
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.

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum