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]

Re: CSS help

leo <someone@somewh ere.net> wrote:
[color=blue]
>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?[/color]

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;
[color=blue]
>[If you check it with IE, it magically WORKS.][/color]

IE gets a lot of things of wrong. These are just two of them.
[color=blue]
>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?[/color]

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 <steve@pugh.net > <http://steve.pugh.net/>

[Del Ferguson]

Re: CSS help

Steve Pugh wrote:[color=blue]
> leo <someone@somewh ere.net> wrote:
>
>[color=green]
>>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?[/color]
>
>
> 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;
>
>[color=green]
>>[If you check it with IE, it magically WORKS.][/color]
>
>
> IE gets a lot of things of wrong. These are just two of them.
>
>[color=green]
>>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?[/color]
>
>
> Add another <li> before the About item and apply unique styles to it.
>
> Steve
>[/color]

Leo,

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

Cheers,

Del Ferguson