Stylesheets - IE6 issue - content moving down at small browser width

Author

IE6 issue - content moving down at small browser width

Pete Horrobin

2007-07-16, 3:16 am

I've been having "fun" trying to get the following design to work in IE6
at 800x600 for a couple of days with no effect, so reckon it's time to
call on the experts!

Test page is at http://www.horshamhc.co.uk/site07/bannertest.htm

which uses CSS at http://www.horshamhc.co.uk/site07/hhcstyles07.css

The design displays as desired in FF2 and Op9.2 at 1024x768 and 800x600,
and in IE6 at 1024x768, but at the smaller size the main content (the
centre boxes) drops down to below the left and right columns.

The movement suggests to me that I'm not dealing with the floated columns
correctly, but I've tried re-ordering the code and/or adding "clear" divs
in sundry places all to no avail.

I'd be grateful if anyone could spare a few moments to have a look to see
where I'm going wrong, and if possible suggest a solution.

Please note that the design is intended to have the footer appear at the
bottom of the viewport if content is short, else below all content if the
page needs to be scrolled. On the test page, the main content has a cyan
background, whilst the left and right columns have an orchid background,
simply to give me a clue as to what is happening. In case it's relevant,
I'm on a WinXP2 box.

TIA

Pete
--
www.lightningnews.com Lightning fast anonymous usenet downloads for 5$ only !

Chris F.A. Johnson

2007-07-16, 3:16 am

On 2007-07-16, Pete Horrobin wrote:
> I've been having "fun" trying to get the following design to work in IE6
> at 800x600 for a couple of days with no effect, so reckon it's time to
> call on the experts!
>
> Test page is at http://www.horshamhc.co.uk/site07/bannertest.htm
>
> which uses CSS at http://www.horshamhc.co.uk/site07/hhcstyles07.css
>
>
> The design displays as desired in FF2 and Op9.2 at 1024x768 and 800x600,
> and in IE6 at 1024x768, but at the smaller size the main content (the
> centre boxes) drops down to below the left and right columns.

That's probably better than what I see in a narrow Firefox window:
<http://woodbine-gerrard.com/testing/hhc.jpg>

> The movement suggests to me that I'm not dealing with the floated columns
> correctly, but I've tried re-ordering the code and/or adding "clear" divs
> in sundry places all to no avail.

Check the widths you specify; don't forget that padding, margins
and borders are added to make the total width .

> I'd be grateful if anyone could spare a few moments to have a look to see
> where I'm going wrong, and if possible suggest a solution.
>
> Please note that the design is intended to have the footer appear at the
> bottom of the viewport if content is short, else below all content if the
> page needs to be scrolled. On the test page, the main content has a cyan
> background, whilst the left and right columns have an orchid background,
> simply to give me a clue as to what is happening. In case it's relevant,
> I'm on a WinXP2 box.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)