Footer problem

graisbeck posted this at 21:39 — 2nd September 2007.

Joined: Jul 2007

Hi,

I've started to build my new site with a CSS layout rather than using tables. When the text on my homepage is enlarged using the browsers accessibility tool, the footer moves further up the page rather than down the page.

This is the first time i've used CSS for layouts and it is driving me mad.

Heres the temporary url: http://www.freewebs.com/gladstones

Thanks in advance,
Gary

Gary

webwiz posted this at 03:40 — 3rd September 2007.

He has: 629 posts

Joined: May 2007

Hi Gary,
The reason for your footer problem is that you have given all the columns a fixed pixel height. Most browsers, with the exception of IE 5 and 6 Windows, obey that declaration and put the footer immediately after the 620 pixels of height. The content then overflows the container, covering the footer, with the result you observe.

Eliminate the height declarations, and put a white background on the "wrap" -- I think that will do what you want.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

graisbeck posted this at 10:20 — 3rd September 2007.

He has: 49 posts

Joined: Jul 2007

Thanks David,
I did as you suggested and it now renders properly across IE6, IE7 and Firefox (i'm unable to test it in IE5).
I've also started to remove the height declarations in the left navigation too (not on the temporary url site yet though).
The only problem i can foresee, is with the top navigation, as each button image is within a div and the text is not actually in the images, its within the xhtml.
Any ideas?

Thanks again,
Gary

I've now updated the site url: http://www.freewebs.com/gladstones

Gary

webwiz posted this at 19:31 — 3rd September 2007.

He has: 629 posts

Joined: May 2007

Yes. I did notice that the menu items do not expand for larger text. I have a high-definition laptop, set to 120 DPI - a common setting for these PCs. To compensate for the smaller pixel sizes, IE and Opera both make fonts 25% bigger. (To correspond to points, rather than pixels, to be technical.)

As with the sidebars, I tend to allow menu items to expand with increased text size. All it would need for your menu is take off the height declaration and make the background images big enough to allow for a text size of "largest" (in IE). Or perhaps a slight increase in width so that "Web Design" does not wrap?

I assume you will add some "title" text at some point.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

graisbeck posted this at 10:29 — 7th September 2007.

He has: 49 posts

Joined: Jul 2007

Thanks for the info David, i didnt realise that.
I've changed all of the declarations where needed, the site now renders well in IE6 and IE7 with the text set at the largest setting. In Firefox it renders ok with the text enlarged once, but i don't want to alter the nav's any more, as this will change the site too much.
I'm nearly sure it will be ok for accessibility.
I've also added the 'web design' page, but it's not finished yet!

http://www.freewebs.com/gladstones

Please let me know what you think.

Thanks,

Gary