Need some help if possible with my CSS.
I am using floating properties to arrange objects in my webpage.
Problem:
Placements of objects are good when viewed in I.E but in FireFox it's totally wrong.
Code:
body {
margin: 0px;
font-size: 12px;
font-family: "trebuchet ms", arial, sans-serif; }
#top { width: 100%;
height: 68px;
background-color: rgb(126,146,186);
border-bottom: 3px ridge rgb(126,146,186) }
address { margin-top: 18px;
border-top: 1px solid darkorange;
font-size: smaller;
padding-top: 3px;
font-weight: bold;
font-style: normal }
a { color: navy;
font-size: 12px;
font-weight: bold;
text-decoration: none }
.copylead { color: black }
h1 { font-size: 20px;
background-color: #f90;
padding-left: 5px;
letter-spacing: .2em;
font-variant: small-caps }
h2 {
font-size: 18px;
color: navy;
font-weight: lighter; }
h3 { margin: 0px; font-size: 12px }
#main { width: 400px;
padding: 8px;
border: 1px dashed orange;
margin-top: 13px; }
#main img { float:Left;
padding-right: 8px;}
#nav {
margin: 12px;
width: 100px;
padding: 8px;
border: 1px dashed orange;
height: 140px;
float:left;}
#nav2 {
margin: 12px;
width: 100px;
padding: 8px;
border: 1px solid black;
float:left;
clear:left;}
#footer { width: 530px;
background-color: rgb(126,146,186);
color: white;
border: 1px solid #000;
padding: 8px;
margin-left: 12px;
margin-top: 20px;
text-align: center; }
#footer a { color: white }
.other {
font-size: 10px;
padding-left: 2px }