[SOLVED] Accessibility problem with layout

Graisbeck · August 30th, 2007, 03:32 AM

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 · August 30th, 2007, 10:01 AM

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 · August 30th, 2007, 10:15 AM

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 · August 30th, 2007, 04:34 PM

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 · August 31st, 2007, 06:41 AM

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 · September 2nd, 2007, 05:50 PM

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 · September 2nd, 2007, 05:56 PM

Quote:

Originally Posted by ScottR

Try using percentages.

Good Luck,
Scott

Graisbeck · September 3rd, 2007, 08:16 AM

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