<div> not displaying correctly in Firefox V1.0.7

[jakiti]

Hi

I am quite new to CSS and I seem to be having problems lining up two of my <div>. They appear to look hunkey dorey in IE, but when I view them in firefox 1.0.7, the top two are out of whack. Please see link: http://www.jakitidesign.com/holderhighreunion/index.php

Here is my very bodgy css code:

body {
  font-family:Geneva, Arial, Helvetica, sans-serif;
  font-size:small;
  margin: 0;
  padding: 0;
  text-align: center; /* hack for IE quirk */
  background-color:#ebedf8;
}
 
td {
    font-family: Geneva, Arial, helvetica, sans-serif;
    margin-left:8px;
    padding-left:8px;
    padding-bottom:8px;
    margin-bottom:10px;
    text-align:left;  /* counteracting the IE hack */
}
 
th {
    font-family: Geneva, Arial, helvetica, sans-serif;
    text-align:left;  /* counteracting the IE hack */
}
 
h1 {
    font-family:Arial Narrow;
    font-size:x-large;
    font-stretch:ultra-condensed;
    color:#0e56a4;
    margin-top:8px;
    margin-bottom:8px;
    padding-top:8px;
    padding-bottom:8px;
    text-align:left;  /* counteracting the IE hack */
}
 
.bioName {
    font-family:Arial Narrow;
    font-size:170%; font-weight:200;
    font-stretch: extra-condensed;
    color:#0e56a4;
    text-align:left;
    background-color:#e8edf8;
 
}
 
.formField {
    font-family:Arial Narrow;
    font-size:small;
    font-stretch: extra-condensed;
    color:#0e56a4;
    text-align:right;
    vertical-align:text-top;
}
 
.box2 {
    margin:8px;
    padding:8px;
    spacing:8px;
    border:2px;
    border-color: #e8edf8;
    border-style:dashed;
    background-color:#FFFFFF;
}
 
.footnote {
    font-family:Arial Narrow;
    font-size:x-small;
    font-stretch: extra-condensed;
    text-align:right;
}
 
.emp {
    font-family:Arial Narrow;
    font-size:130%;
    font-stretch: extra-condensed;
    color:#0e56a4;
    font-weight:400;
}
 
#header {
    top:100px;
    left:100px;
    width:840px;
    height:320px;
    background: #FFFFFF url(images/holderHigh_header2.png) no-repeat;
}
 
#navigation {
    top:100px;
    left:100px;
    width:840px;
    height:51px;
    background: #FFFFFF url(images/holderHigh_nav2.png) no-repeat;
}
 
.nav {
    color:#FFFFFF
}
 
.nav a:link {
    COLOR: #FFFFFF; TEXT-DECORATION: none;
}
 
.nav a:hover {
    color:#f9bf01;
}
 
.nav a:visited {
    COLOR: #FFFFFF; TEXT-DECORATION: none;
}
 
#content {
    left:100px;
    width:840px;
    background: #FFFFFF url(images/holderHigh_bg2.png);
}
 
#footer {
    left:100px;
    width:840px;
    height:75px;
    background: #FFFFFF url(images/holderHigh_footer2.png) no-repeat;
}
 
a {
    text-decoration:none;
    color:#FCA900;
}
 
a:hover {
    color:#0e56a4;
}
 
hr {
    border: none 0; 
    border-top: 1px dashed #000;
    border-bottom: 1px dashed #ccc;
    width: 80%;
    height: 2px;
    margin: 10px auto 0 0;
    text-align: center;
    }
 

Any help would be most appreciated!

Thanks heaps

[drhowarddrfine]

I haven't had FF 1.0.7 for months, or is it years?

In any case, it doesn't center in FF 2.0.6 either but it has nothing to do with Firefox. You are using non-standard elements in your HTML and CSS that do not work in any browser but IE, so you shouldn't use them either. Validate your html and css for that list.

In addition, new web sites should always use the strict doctype. See the article about doctypes under Articles above.

To get modern browsers, such as Firefox, to center like you want, add 'margin:0 auto' to #navigation and #header. You should also add that to your content div and remove <center> since that's been deprecated for years.

[jakiti]

I haven't had FF 1.0.7 for months, or is it years?

In any case, it doesn't center in FF 2.0.6 either but it has nothing to do with Firefox. You are using non-standard elements in your HTML and CSS that do not work in any browser but IE, so you shouldn't use them either. Validate your html and css for that list.

In addition, new web sites should always use the strict doctype. See the article about doctypes under Articles above.

To get modern browsers, such as Firefox, to center like you want, add 'margin:0 auto' to #navigation and #header. You should also add that to your content div and remove <center> since that's been deprecated for years.

Thank you so much for your help drhowarddrfine, I really appreciate it. Please know, that I knew the error was not with Firefox and that it was in my code, just didn't put that across properly. I've got much to learn. I will go and read the articles and update my antiquated browsers! Thanks again.