Layout problems

[TashJudd]

Hi everyone,

I'm rather new to using CSS rather than tables, and am trying to put together a campaign site for Alzheimer's Awareness week, however, I'm stuck with the layout of the front page.

http://www.alzheimers.org.uk/aaw2007/

This front page is displaying okay in Internet Explorer 7:

But not so well in Firefox:

The golfers image at the bottom should be aligned left, and the keep your brain active section should be next to it - like it is in Fireworks.

Is there something I can add to one of my css elements to fix this?

Would be very grateful for any help.

Tash

PS: The big white space at the top of the page is just a placeholder until the banners are approved.

[drhowarddrfine]

Validate your html for your list of 18 errors there. Then validate and fix your css errors.

I'll be gone till tonight and I'll look at this then.

[TashJudd]

Thanks for your help.

I've validated the page, and got rid of the errors I made yesterday.
http://www.alzheimers.org.uk/aaw2007/index.htm

Unfortunately still having problems with lining up the firefox version.

Tash

[drhowarddrfine]

Sometimes people forget to validate their CSS.
That won't fix this but it needs to be fixed. I'm looking at it now.

[drhowarddrfine]

Most people are afflicted with the 'divitis' disease which is the use of too many <div> elements. Here I see a more rare form of the same thing 'spanitis'. The <span> element is used on inline elements that are part of the normal flow of paragraphs, usually.

The problem here is IE, which it almost always is. IE does not handle floats properly at times. To get FF to do what you want, add 'clear:left' to the CSS for #imagebox. Whether this will continue to work for you if you add more stuff to the page, I don't know.

[TashJudd]

Thanks so much for your time and advice!

Will now go and look for the cure for spanitis.