need help solving IE6 and Firefox display inconsistency

I am having the following problem
http://jessica.ourprofile.net/

are being rendered differently on Firefox and IE6 (PC).

I have outline the div culprits in red to help with debugging.
Basically, the logo div sits about 10 pixels below the top of the page
in Firefox pushing content where I want it to be. IE does not push the
logo down and hence the problem.

I have tried just about everything and have made sure I am working in
standard mode (not quirks).

Please help!

The problems styles:

#nav { border: 0pt none ; margin: 0pt; padding: 0px 0px 0px 25px;
float: left; top:0px; width: 724px; height: 132px;
background:url(../images/common/nav.jpg) no-repeat 20px bottom;display:
inline; border: 1px solid #F00;}
/*Logo*/
#nav h1 { text-indent: -10000px;}
#nav h1 a { background: transparent url('../images/common/logo.gif')
no-repeat bottom; width: 214px; height: 88px; border: 1px solid #F00;}

/*navigation buttons */
#nav ul { margin: 0pt; padding: 0pt; background: transparent
url('../images/common/nav_all.gif') repeat; position: relative; width:
491px; height: 17px; }
#nav ul li { margin: 0pt; padding: 0pt; list-style-type: none;
list-style-image: none; list-style-position: outside; position:
absolute; top: 0pt; }
#nav ul li, #nav a { border-bottom: 0pt none; display: block; height:
17px; }
#nav ul li a { text-indent: -9999px; text-decoration: none; }

Jessica M wrote:

I am having the following problem
http://jessica.ourprofile.net/

are being rendered differently on Firefox and IE6 (PC).

I have outline the div culprits in red to help with debugging.
Basically, the logo div sits about 10 pixels below the top of the page
in Firefox pushing content where I want it to be. IE does not push the
logo down and hence the problem.

I have tried just about everything and have made sure I am working in
standard mode (not quirks).

Please help!

The problems styles:

#nav { border: 0pt none ; margin: 0pt; padding: 0px 0px 0px 25px;
float: left; top:0px; width: 724px; height: 132px;
background:url(../images/common/nav.jpg) no-repeat 20px bottom;display:
inline; border: 1px solid #F00;}
/*Logo*/
#nav h1 { text-indent: -10000px;}
#nav h1 a { background: transparent url('../images/common/logo.gif')
no-repeat bottom; width: 214px; height: 88px; border: 1px solid #F00;}

/*navigation buttons */
#nav ul { margin: 0pt; padding: 0pt; background: transparent
url('../images/common/nav_all.gif') repeat; position: relative; width:
491px; height: 17px; }
#nav ul li { margin: 0pt; padding: 0pt; list-style-type: none;
list-style-image: none; list-style-position: outside; position:
absolute; top: 0pt; }
#nav ul li, #nav a { border-bottom: 0pt none; display: block; height:
17px; }
#nav ul li a { text-indent: -9999px; text-decoration: none; }

hoping someone can help with this? I am still stuck! Thanks jim for the
suggestions--tried them but I think the problem is IE not Firefox

what if you just set a top margin on the page? it seems like youre
overcomplicating this



"Jessica M" <mailingsgalore (AT) gmail (DOT) com> wrote

Jessica M wrote:
I am having the following problem
http://jessica.ourprofile.net/

are being rendered differently on Firefox and IE6 (PC).

I have outline the div culprits in red to help with debugging.
Basically, the logo div sits about 10 pixels below the top of the page
in Firefox pushing content where I want it to be. IE does not push the
logo down and hence the problem.

I have tried just about everything and have made sure I am working in
standard mode (not quirks).

Please help!

The problems styles:

#nav { border: 0pt none ; margin: 0pt; padding: 0px 0px 0px 25px;
float: left; top:0px; width: 724px; height: 132px;
background:url(../images/common/nav.jpg) no-repeat 20px bottom;display:
inline; border: 1px solid #F00;}
/*Logo*/
#nav h1 { text-indent: -10000px;}
#nav h1 a { background: transparent url('../images/common/logo.gif')
no-repeat bottom; width: 214px; height: 88px; border: 1px solid #F00;}

/*navigation buttons */
#nav ul { margin: 0pt; padding: 0pt; background: transparent
url('../images/common/nav_all.gif') repeat; position: relative; width:
491px; height: 17px; }
#nav ul li { margin: 0pt; padding: 0pt; list-style-type: none;
list-style-image: none; list-style-position: outside; position:
absolute; top: 0pt; }
#nav ul li, #nav a { border-bottom: 0pt none; display: block; height:
17px; }
#nav ul li a { text-indent: -9999px; text-decoration: none; }

hoping someone can help with this? I am still stuck! Thanks jim for the
suggestions--tried them but I think the problem is IE not Firefox