Fluidity help

[Andrew Cameron]

I'm having a problem with a new site I'm building. The test page is at (
http://dumpage.net/is/ ) with the CSS at ( http://dumpage.net/is/is.css )
and it validates (
http://validator.w3.org/check?uri=http://dumpage.net/is/ ).

I have described the problem on the page, but the basics of it is that all
browsers seem to be ignoring the 80% width I've given to the body, and just
go and show all DIVs at 100% - this doesn't sound right to me.

IE6 displays the page how I want it to be (other than the width issue) but
Opera and Firebird drop the main content DIV below everything else when I
don't define a width - but I don't want fixed-width! I can't go to
percentages because the menu needs to be 120px wide or the hover effect
doesn't work - I don't understand why I can't define the parent elements and
let the children fall into place. Using the clear property makes no
difference either, which surprised me as it's been a life-saver in the past.
I would appreciate any help in keeping this design fluid. Thank you.

 

[Toby A Inkster]

http://dumpage.net/is/

First problem:
| It displays next to the menu, as intended, in IE6 but in Firebird and
| Opera (the correctly-rendering browsers) this text drops below the menu.

Why is IE6 different? Because it is is quirks mode. Look at the top line
of the HTML and you'll understand why.

Second problem:
| Not only that, but all browsers are ignoring the 80% width I've given to
| the body

Missing semicolon.

 

[Andrew Cameron]

First problem:

Why is IE6 different? Because it is is quirks mode. Look at the top
line of the HTML and you'll understand why.

The xml declaration? I removed that, and even tried a different doctype
(HTML 4 Strict) but still IE displays it how I want (which is obviously
wrong, because Firebird displays it right, I realise) and the others don't.

Second problem:

Missing semicolon.

Thanks for noticing this! That now works, and I have amended the site
accordingly. Can you help with the dropping DIV by any chance? Thanks for
the reply.

 

[Toby A Inkster]

The xml declaration? I removed that, and even tried a different doctype
(HTML 4 Strict) but still IE displays it how I want (which is obviously
wrong, because Firebird displays it right, I realise) and the others don't.

Hmmm... I thought that would have been the problem. It usually is.

Try getting rid of the right float on #content and then adding:

#shell #content { width: auto; margin-left: 150px; }

Should do what you want.

 

[Andrew Cameron]

Try getting rid of the right float on #content and then adding:

#shell #content { width: auto; margin-left: 150px; }

Should do what you want.

Thanks Toby, this looks fantastic!

Now, if I put width: auto on the #content, leave the h1 definition alone but
put the margin on p, I get a neat overlap effect of the menu. What do you
think? ( http://dumpage.net/is/ )

 

[kathy painter]

----- Original Message -----
but put the margin on p, I get a neat overlap effect of the menu. What do
you think? ( http://dumpage.net/is/ )


I'm sorry, Andrew, I'm not Toby, but I don't care fore the overlap feature
at all. You may need to lower the font size on menu because it simply seems
larger than the text, even though it may not be. Also, the menu feels "in
my face" because it is so high up. I might suggest you tone town the 2
heading colors, they seem bolder than the entire page. Check at softening it
up.

Like I said, I'm nobody but I hope my comments help you. Take them or leave
them.

Kathy