IE gives me the blues

[smallfish]

hey guys,
quick question that shouldn't tax yer brains too hard:
in FF, the css layout is perfect, but in IE the <div> kicks out beyond the set width of the page and won't stick to the left like it should.

here's the link:
http://randr.smallfishserver.com/

i have 5 <divs>:
#wrapper (envelops the whole mass)
#nav (runs the lenght of window on the left)
#header (just the top header image)
#foucs (the body of the page)
#footer (runs the width of the bottom of the page)

#wrapper {width:810px;}
#nav {float:left; width:210px;}
#header {float:left; clear: right; width:600px;}
#focus {float: left; clear: right; width:600px;}
#footer {float:left; clear:both width:810px;}


any help will be greatly appreciated. thanks IA,
grant

[ray326]

See if clearing some of this up helps.
http://validator.w3.org/check?verbose=1&uri=http://randr.smallfishserver.com/

[smallfish]

did that and still the same issue.

[bathurst_guy]

What happens if you give the focus div a clear both instead of a clear right?

[smallfish]

no dice. it pushed the focus div to the bottom of the page. this can't be that hard. i've fixed it before but can't remember how.

[bathurst_guy]

Give focus display:block? I'm just chucking things up in the air :)

[bathurst_guy]

Give header min-height:160px; aswell as height

[smallfish]

we're crappin' out. nothing. of course FF displays it correctly.

[alexthecatta]

i can not give anysuggestion cos i have the same prob of smallfish. design is OK in FF but not in IE

www.cattaneoalessandro.com

if I set the width for the divCont (now it's width:auto) all the block drop down, but just in IE, not in FF...i'm desperate :(

[felgall]

Work out which div is in the wrong place. At least then you know which section of the CSS needs fixing.

[smallfish]

i appreciate the help that is being given and have simplified the issue. here's the html:
<div title="nav" style="width:210px; height:400px; float:left; background-color:#666666;"></div>
<div title="header" style="width:600px; height:150px; float:left; clear:right; background-color:#006666;"></div>
<div title="focus" style="width:600px; height:250px; float:left; clear:right; background-color:#00CC33;"></div>
<div title="footer" style="width:810px; height:100px; float:left; clear:both; background-color:#990000;"></div>


here's the example:
http://randr.smallfishserver.com/test.html

this shouldn't be this difficult (i don't think),;)
grant

[smallfish]

i forgot one last div, so here's the code:
<div title="wrapper" style="width:810px;">
<div title="nav" style="width:210px; height:400px; float:left; background-color:#666666;"></div>
<div title="header" style="width:600px; height:150px; float:left; clear:right; background-color:#006666;"></div>
<div title="focus" style="width:600px; height:250px; float:left; clear:right; background-color:#00CC33;"></div>
<div title="footer" style="width:810px; height:100px; float:left; clear:both; background-color:#990000;"></div>
</div>

[bathurst_guy]

What if you try this<div title="wrapper" style="width:810px;">
<div title="nav" style="width:210px; height:400px; float:left; background-color:#666666;"></div>
<div title="header" style="width:600px; height:150px; float:right; background-color:#006666;"></div>
<div title="focus" style="width:600px; height:250px; float:right; clear:right; background-color:#00CC33;"></div>
<div title="footer" style="width:810px; height:100px; float:left; clear:both; background-color:#990000;"></div>
</div>

[smallfish]

Bathurst_guy,
you're the man! you nailed it. it fixed the problem in both FF and IE. good job.

now your reward:
you will now receive total consciousness on your deathbed. (caddyshack reference)

later,
grant