Menu
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
LIVE EXAMPLE HERE
[url]http://www.ats-heritage.co.uk/div/template.html