Layout problem with FireFox

[mordock32]

http://www.inlandseafood.com/dogtree/

When viewed in FireFox 1.0.4, some portions of the CSS layout are way
off. After reloading the page, everything is fine until the cache is
cleared again. Where can I start looking for a solution? Both the HTML
and CSS have been validated and are clear of any warnings.

Thanks a bunch!

[mordock32]

Just for more info, the same problem happens in Netscape, and Opera
just does the wrong thing all the time. ;-) So I have to assume that my
CSS isn't correct somehow. Here's the file:

html,body {
width:100%;
height:100%;
margin:0px;
padding:10px;
}

a:link {
color:#000000;
}

a:visited {
color:#669999;
}

#header-left {
width:263px;
background:#e3e2e0;
border:1px solid #978f8d;
}

#header-right {
float:left;
position:absolute;
margin-top:-127px;
margin-left:263px;
position:absolute;
height:125px;
width:71%;
border-top:1px solid #978f8d;
border-bottom:1px solid #978f8d;
}

#division-header {
float:right;
margin-top:-127px;
margin-right:50px;
background:#e3e2e0;
border:1px solid #978f8d;
}

#content {
margin-left:263px;
padding:20px;
padding-right:50px;
}

#navigation {
float:left;
width:200px;
margin-top:50px;
margin-left:10px;
background:#e3e2e0;
border:1px solid #978f8d;
}

#navigation-title {
float:left;
position:absolute;
margin-top:35px;
margin-left:10px
}

#micro-nav {
float:right;
width:150px;
padding-right:20px;
background:#e3e2e0;
border:1px solid #978f8d;
}

#micro-nav-title {
float:right;
margin-top:-15px;
margin-right:-113px;
}

..logo-text {
float:left;
position:absolute;
margin-left:15px;
margin-top:-47px;
font-size:36px;
}

[JP. Baker]

In article <11**********************@g44g2000cwa.googlegroups .com>,
<mo*******@hotmail.com> wrote:

http://www.inlandseafood.com/dogtree/

When viewed in FireFox 1.0.4, some portions of the CSS layout are way
off. After reloading the page, everything is fine until the cache is
cleared again. Where can I start looking for a solution? Both the HTML
and CSS have been validated and are clear of any warnings.

It looks to me as if the objects which have both 'float:left' and
'position:absolute' are, wrongly, being floated on the first view
and then, correctly, the float is ignored on the second. As
positioned elements cannot be floated, you may have more joy if you
remove the conflict from your stylesheet and in-line styles.

nhoJ
--
John P Baker

[mordock32]

Thanks for the heads-up with float and position. I fixed the problem by
removing all float and position attributes and using absolute
everywhere I could get away with. The pages are consistent across IE,
FireFox, and Netscape. Opera still screws up the logo text though. ;-)

Thanks again for your help.

[Tony]

mo*******@hotmail.com wrote:

Thanks for the heads-up with float and position. I fixed the problem
by removing all float and position attributes and using absolute
everywhere I could get away with. The pages are consistent across IE,
FireFox, and Netscape. Opera still screws up the logo text though. ;-)

Thanks again for your help.

I've found that opera has its own little sets of quirks...

--
Tony Garcia
http://www.dslextreme.com/~tony23/