CSS help

[leo]

Here is a copy of the web site I am working on:

http://sunshineboy.no-ip.org/royaloaks/index.html
If you look at the bottom of the 2nd picture and the text, you see the
brown background (on Firefox). It is NOT intended to be there. What did
I do wrong in the CSS?

[If you check it with IE, it magically WORKS.]

Thanks.
PS. I also want to have a little graphics on the left side of the menu,
where the brown background is, i.e. left of "About." How can I achieve it?

[Steve Pugh]

leo <so*****@somewhere.net> wrote:

http://sunshineboy.no-ip.org/royaloaks/index.html

If you look at the bottom of the 2nd picture and the text, you see the
brown background (on Firefox). It is NOT intended to be there. What did
I do wrong in the CSS?
First you haven't cleared the floated image.
Secondly you haven't taken into account the margin collapsing of the
bottom margin of the last paragraph inside the content.

Check the CSS spec to see why FF and Opera, etc., are correctly
applying your styles whilst IE is geting it wrong.

Insert an element between the text and the end of the cotentcontainer
div with clear: left and margin: 0;
[If you check it with IE, it magically WORKS.]
IE gets a lot of things of wrong. These are just two of them.
PS. I also want to have a little graphics on the left side of the menu,
where the brown background is, i.e. left of "About." How can I achieve it?

Add another <li> before the About item and apply unique styles to it.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Del Ferguson]

Steve Pugh wrote:

leo <so*****@somewhere.net> wrote:

http://sunshineboy.no-ip.org/royaloaks/index.html

If you look at the bottom of the 2nd picture and the text, you see the
brown background (on Firefox). It is NOT intended to be there. What did
I do wrong in the CSS?

First you haven't cleared the floated image.
Secondly you haven't taken into account the margin collapsing of the
bottom margin of the last paragraph inside the content.

Check the CSS spec to see why FF and Opera, etc., are correctly
applying your styles whilst IE is geting it wrong.

Insert an element between the text and the end of the cotentcontainer
div with clear: left and margin: 0;

[If you check it with IE, it magically WORKS.]

IE gets a lot of things of wrong. These are just two of them.

PS. I also want to have a little graphics on the left side of the menu,
where the brown background is, i.e. left of "About." How can I achieve it?

Add another <li> before the About item and apply unique styles to it.

Steve

Leo,

You might want to check your spelling on the page after you apply
Steve's recommendations.

Cheers,

Del Ferguson