firefox and css

css messes up firefox display

[djcmalvern]

Sorry to bother everyone again on this subject, but at a loss...!
Having run the following script through validation it still works fine in IE but in Firefox it messes up. Page components appear in wrong areas, footer menus move into third column and other rubbish. I did not set this up initially but am now being asked to fix site for display in Firefox. Any help would be most welcome. Html on calling page is also validated.

div.false {
position : absolute;
}
div.bgdk {
width : 750px;
height : 150px;
border-bottom : 1px solid white;
z-index : 0;
background-color : #5a688d;
}
div.bglt {
margin-top : 4px;
margin-left : 4px;
margin-right : 4px;
width : 100%;
height : 100px;
z-index : 3;
background-color : #a3b9e5;
}
div.bgwt {
width : 750px;
height : 84px;
z-index : 4;
background-color : rgb(204, 219, 226);
}
div.blue {
width : 750px;
height : 40px;
z-index : 4;
border-bottom : 1px solid white;
background-color : #5a688d;
}
div.blue2 {
width : 750px;
height : 40px;
z-index : 4;
border-bottom : 1px solid white;
background-color : #5a688d;
}
div.temp {
background-color : rgb(202, 214, 228);
}
body {
width : 760px;
text-align : center;
margin-left : auto;
margin-right : auto;
}
div.pageborders {
border-right : 5px solid black;
}
div.bh {
margin-top : 0;
margin-left : 4px;
padding : 0.1em 0;
width : 100%;
z-index : 5;
}
div.imgl {
float : left;
margin-left : 0;
margin-top : 4px;
width : 75px;
z-index : 6;
top : 25px;
}
div.imgr {
float : right;
margin-right : 5px;
margin-top : 8px;
width : 75px;
height : 51px;
z-index : 6;
top : 25px;
}
div.whole {
margin-right : 25px;
width : 700px;
background-color : #ffffff;
}
div.nav {
width : 750px;
}
div.dkline {
width : 750px;
height : 5px;
background-color : #5b567e;
}
div.dklinesm {
width : 588px;
height : 5px;
background-color : #5b567e;
}
a.nav5 {
width : 100%;
text-align : center;
float : left;
font : 13px arial;
text-decoration : none;
color : black;
background-color : #a3b9e5;
padding : 0.5em 0.6em;
border-right : 1px solid white;
border-bottom : 1px solid white;
}
a.nav4 {
width : 740px;
text-align : center;
float : left;
font : 13px arial;
text-decoration : none;
color : black;
background-color : #eae5de;
font-weight : bold;
padding : 0.2em 0.6em;
border-right : 1px solid white;
border-bottom : 1px solid white;
}
a.nav1 {
width : 53px;
border-bottom : 1px solid white;
text-align : center;
float : left;
font : 13px arial;
text-decoration : none;
color : black;
background-color : #eae5de;
padding : 0.2em 0.6em;
border-right : 1px solid white;
}
a.nav2 {
width : 115px;
text-align : center;
float : left;
font : 13px arial;
text-decoration : none;
color : black;
background-color : #eae5de;
padding : 0.2em 0.6em;
border-right : 1px solid white;
border-bottom : 1px solid white;
}
a.nav3 {
width : 103px;
text-align : center;
float : left;
font : 13px arial;
text-decoration : none;
color : black;
background-color : #eae5de;
padding : 0.2em 0.6em;
border-right : 1px solid white;
border-bottom : 1px solid white;
}
a.nav6 {
width : 108px;
text-align : center;
float : left;
font : 13px arial;
text-decoration : none;
color : black;
background-color : #eae5de;
padding : 0.2em 0.6em;
border-bottom : 1px solid white;
}
a.nav7 {
width : 150px;
text-align : center;
float : left;
font : 13px arial;
text-decoration : none;
color : black;
background-color : #eae5de;
padding : 0.2em 0.6em;
border-right : 1px solid white;
border-bottom : 1px solid white;
}
a.nav8 {
width : 85px;
text-align : center;
float : left;
font : 13px arial;
text-decoration : none;
color : black;
background-color : #eae5de;
padding : 0.2em 0.6em;
border-right : 1px solid white;
border-bottom : 1px solid white;
}
a.nav9 {
width : 136px;
text-align : center;
float : left;
font : 13px arial;
text-decoration : none;
color : black;
background-color : #eae5de;
padding : 0.2em 0.6em;
border-right : 1px solid white;
border-bottom : 1px solid white;
}
a.silver {
font : 13px arial;
text-decoration : none;
color : black;
}
a.silver:hover {
text-decoration : underline;
}
a.navside {
font : 13px arial;
text-decoration : none;
}
a.navside:hover {
text-decoration : underline;
}
a.nav9:link {
color : black;
}
a.nav9:visited {
color : black;
}
a.nav9:hover {
text-decoration : underline;
}
a.nav8:link {
color : black;
}
a.nav8:visited {
color : black;
}
a.nav8:hover {
text-decoration : underline;
}
a.nav7:link {
color : black;
}
a.nav7:visited {
color : black;
}
a.nav7:active {
color : #5b567f;
}
a.nav7:hover {
text-decoration : underline;
}
a.nav6:link {
color : black;
}
a.nav6:visited {
color : black;
}
a.nav6:hover {
text-decoration : underline;
}
a.nav5:link {
color : black;
}
a.nav5:visited {
color : black;
}
a.nav5:hover {
text-decoration : underline;
}
a.nav4:link {
color : black;
}
a.nav4:visited {
color : black;
}
a.nav4:hover {
text-decoration : underline;
}
a.nav1:link {
color : black;
}
a.nav1:visited {
color : black;
}
a.nav1:hover {
text-decoration : underline;
}
a.nav2:link {
color : black;
}
a.nav2:visited {
color : black;
}
a.nav2:hover {
text-decoration : underline;
}
a.nav3:link {
color : black;
}
a.nav3:visited {
color : black;
}
a.nav3:hover {
text-decoration : underline;
}
container {
width : 750px;
border : none;
background-color : #ffffff;
}
div.leftcolumn {
width : 115px;
height : 100%;
float : left;
text-align : center;
font : 13px arial;
text-decoration : none;
color : black;
background-color : #eae5de;
padding : 0.2em 0.6em;
border-right : 1px solid white;
border-bottom : 1px solid white;
}
div.rightcolumn {
width : 115px;
float : left;
height : 700px;
text-align : center;
font : 13px arial;
text-decoration : none;
color : black;
background-color : rgb(243, 246, 255);
padding : 0.2em 0.6em;
border-right : 1px solid white;
border-bottom : 1px solid white;
}
div.leftcolumn2 {
width : 115px;
float : left;
height : 700px;
text-align : left;
font : 13px arial;
text-decoration : none;
color : black;
background-color : #eae5de;
padding : 0.2em 0.6em;
border-right : 1px solid white;
border-bottom : 1px solid white;
}
div.maincolumnhome {
width : 516px;
height : 700px;
background-color : rgb(243, 246, 255);
float : left;
border-bottom : 1px solid white;
border-left : 2px solid white;
}
div.rightcolumnhome {
width : 115px;
height : 702px;
float : right;
border-bottom : 1px solid white;
border-left : 3px solid white;
background-color : rgb(243, 246, 255);
}
div.maincolumnhomesplit {
width : 215px;
height : 200px;
background-color : rgb(243, 246, 255);
float : left;
border-right : 1px solid white;
border-bottom : 1px solid white;
z-index : 12;
}
div.maincolumnbuckles {
width : 630px;
height : 702px;
float : right;
background-color : #ffffff;
border-bottom : 1px solid white;
}
img.l {
float : left;
margin : 0 10px 0 0;
}
img.r {
float : right;
margin : 0 0 15px 0;
}
img.button {
float : right;
}
input.button {
float : right;
}
h1 {
font : 14px arial;
text-align : center;
}
h1.bc {
font : 16px arial;
text-align : left;
line-height : 0.1cm;
margin-left : 5px;
}
h1.bg {
font : 22px arial;
text-align : center;
border : medium double rgb(86, 86, 127);
background-color : rgb(243, 246, 255);
padding : 15px;
line-height : 0.9cm;
}
h1.buckle {
font : 16px arial;
text-align : center;
}
h2 {
font : 14px arial;
border : none;
padding : 5px;
}
h2.text {
line-height : 0.5cm;
}
h2.map {
line-height : 0.5cm;
float : left;
width : 50%;
height : 100%;
}
h2.centerh {
text-align : center;
height : 690px;
width : 150px;
}
div.centern {
font : 13px arial;
border-bottom : 1px solid white;
padding : 5px;
width : 750px;
background-color : #eae5de;
text-align : center;
}
h2.stext {
border : 2px solid rgb(86, 86, 127);
padding : 10px;
margin : 0 5px 10px 5px;
line-height : 0.5cm;
font : 12px arial;
background-color : rgb(243, 246, 255);
}
h2.stexth {
padding : 10px;
margin : 0 55px 10px 55px;
line-height : 0.5cm;
font : 12px arial;
text-align : center;
}
h3 {
font : 12px arial;
}
h3.stextblurb {
font : bold 12px arial;
width : 494px;
margin-left : 5px;
}
h4 {
font : 13px arial;
text-align : center;
}
h6 {
font : 10px arial;
text-align : center;
}
div.container {
width : 750px;
}
div.head {
width : 517px;
float : left;
text-align : center;
}

thanks
djcmalvern

[edited by: jatar_k at 2:07 pm (utc) on Sep. 18, 2008]
[edit reason] no urls thanks [/edit]

[swa66]

If IE and the rest of the browsers disagree over simple layouts, all bets are on IE doing the wrong thing.

Developing in IE is a bad idea, cause the code you have tells browsers to do things you didn't want. Making "fixing it" pretty difficult.

The trick is to turn it around: redo it bit by bit in e.g. Firefox, don't just put in code unless you know why you need/want it. What does nothing: keep it out. [Forget how it looks in IE in this stage]

Next fix any issues you still see in Opera/Safari etc (anything but
IE).

Keep the CSS validating.

Once it works in all those, the CSS is "done".

Next take up IE7 and IE6 one at a time. It'll not look at all as to what you wanted. Now fix it not by changing the CSS itself, but fix it by using conditional comments. The nice thing: conditional comments are just comments for all other browsers, they won't even try to interpret it at all so you're safe from having to redo/retest
anything you change.

It might look like a lot of work but will yield you a much better understanding of the code, much better maintainability and IE8 might work without you having to give a second look at it if Microsoft does wha tit promised: make it standards compliant.

As to your code: font-families should end in a generic one e.g.:
sans or serif (arial isn't a generic font)
Things like

* {
 font-family: Arial, Helvetica, Verdana, sans;
}

Could save you a lot of code.

Font sizes: take care about fixing them, user agents can (and should be allowed to, think of the visually challenged users)

For the rest I think you bumped into the broken box model that IE uses.
Try adding borders or outlines on them to learn how they're supposed to be and it'll go smooth.