[SOLVED] Accessibility problem with layout

[Graisbeck]

Hi all,

I'm just about finished the homepage of my new site, but when its viewed in IE7 and Firefox with enlarged text for accessibility, the bottom of the page doesn't render like it should, any ideas on how to solve this problem please?

This is my first attempt at using css for layouts so please be patient with me

http://www.freewebs.com/gladstones/

Thanks in advance,
Gary

[ScottR]

Your site was fine while increasing your font size twice. After the third resizing most of the elements started to overlap. This is due to your containers using absolute sizes. That doesn't allow them to stretch. Try using percentages.

Good Luck,
Scott

[pa007]

Use ems. em is a typographical unit so every non-expanding element that uses ems will resize when text-size is increased or decreased. Elements such as main content areas etc should be ok as the will stretch to fit the content. It's your nav and elements like that that need to stretch on resize.

Pete.

[Graisbeck]

Hi again,

Thanks for the replies Scott and Pete.

I've changed the height measurements in the containing div's from using px's to em's, so could someone please check it again for me in Firefox and IE7 for text size accessibility, as at the moment i dont have access to those browsers.

http://www.freewebs.com/gladstones

Thanks,
Gary

[Graisbeck]

ok, ive managed to view the homepage in Firefox and IE7, even without using the browsers tools to enlarge the text, the page does not render properly using em's. Any ideas would be welcomed.

Thanks in advance,
Gary

[Graisbeck]

I've now changed back to using px's as i can't seem to make the page render any better than what it was at the start.
I thought using css for layouts was meant to be easier than using tables... bah humbug!!!

[ScottR]

Originally Posted by ScottR

Try using percentages.

Good Luck,
Scott

[Graisbeck]

Thanks for all replies,
The solution to the problem was to get rid of the height declarations and to give the 'wrap' div a white background. This stopped the containing divs' content from overflowing.

Thanks again,
Gary