CSS Layout Anomolie

I have been trying to be a very good boy recently and learn to layout a website
using CSS and layers.

I have created a test page that pretty much seems to work.

I have used a wrapper div with a background image so that the main body column
and the right navigation column both "reach" to the bottom.

The page is here: http://www.carrot.co.uk/css/css-test.htm

In Opera and in Firefox it displays without problem however in IE7 the wrapper
div with the background image comes down 20 or so pixels below the bottom
banner, obviously it shouldn't come below the bottom banner at all.

Any ideas on how to stop this would be greafully appreciated.

PD

Perhaps typical of new CSS learners, you have well overengineered the page
and its corresponding CSS: floats everywhere, overflow managed
inappropriately, etc!

Consider this simplified version. Note how the CSS reads from the top of
the page down, and how I have replaced your class selectors with ID
selectors.

http://www.murraytestsite.com/pilot.html

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"Pilot Dave" <webforumsuser (AT) macromedia (DOT) com> wrote

I have been trying to be a very good boy recently and learn to layout a
website
using CSS and layers.

I have created a test page that pretty much seems to work.

I have used a wrapper div with a background image so that the main body
column
and the right navigation column both "reach" to the bottom.

The page is here: http://www.carrot.co.uk/css/css-test.htm

In Opera and in Firefox it displays without problem however in IE7 the
wrapper
div with the background image comes down 20 or so pixels below the bottom
banner, obviously it shouldn't come below the bottom banner at all.

Any ideas on how to stop this would be greafully appreciated.

PD

search through this forum on the differances between IE, FF, NS, Opera, etc.
It's been asked and aswered many times over.

"Pilot Dave" <webforumsuser (AT) macromedia (DOT) com> wrote

I have been trying to be a very good boy recently and learn to layout a
website
using CSS and layers.

I have created a test page that pretty much seems to work.

I have used a wrapper div with a background image so that the main body
column
and the right navigation column both "reach" to the bottom.

The page is here: http://www.carrot.co.uk/css/css-test.htm

In Opera and in Firefox it displays without problem however in IE7 the
wrapper
div with the background image comes down 20 or so pixels below the bottom
banner, obviously it shouldn't come below the bottom banner at all.

Any ideas on how to stop this would be greafully appreciated.

PD

Michael, thank you for your response, my problem wasn't so much with the differences with the browsers but that I am an idiot and had a <p>&nbsp;</p> before closing the wrapper tag.

Murray,

Thanks for all your effort and having studied your code can see excatly what
you mean about overengineering the page.

I am really struggling to understand when one would use IDs and when to use
Classes. I have done loads of research on this and views differ significantly.

On 02 Dec 2006 in macromedia.dreamweaver, Pilot Dave wrote:

I am really struggling to understand when one would use IDs and when
to use Classes. I have done loads of research on this and views
differ significantly.

Use IDs whenever you can, at the highest level you can. Use classes
mainly for exceptions - for example, a table which has most of its cells
aligned right, but you need one centered.

#mywrapperdiv table { text-align : right ; }
..centeralign { text-align : center ; }

--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/email.php

Sorry - that just wouldn't make any difference at all given the other
problems I saw.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"Pilot Dave" <webforumsuser (AT) macromedia (DOT) com> wrote

Michael, thank you for your response, my problem wasn't so much with the
differences with the browsers but that I am an idiot and had a
p>&nbsp;</p> before closing the wrapper tag.

That's the ticket.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"Joe Makowiec" <makowiec (AT) invalid (DOT) invalid> wrote

On 02 Dec 2006 in macromedia.dreamweaver, Pilot Dave wrote:

I am really struggling to understand when one would use IDs and when
to use Classes. I have done loads of research on this and views
differ significantly.

Use IDs whenever you can, at the highest level you can. Use classes
mainly for exceptions - for example, a table which has most of its cells
aligned right, but you need one centered.

#mywrapperdiv table { text-align : right ; }
.centeralign { text-align : center ; }

--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/email.php