Site fine in IE7 but having issues in FireFox

Hi all,
Im hoping someone maybe able to help me here! Im fairly new to using CSS. I have experienced a problem with FireFox in which my navigation menu moves when viewing the site in FireFox right to the top of the page. The site views fine in IE so im a little confused on where i should go to resolve this problem.

Are there any websites that you can check your CSS for validation for cross browser use?

Anyway help would be great
Regards
Tom

 

Hi All,

Well spending the last couple of hours searching google for info on this prob, i thought it maybe best to post my css code in here where im hoping someone will be able to pin point the exact problem!

If anyone can help it would be much appreciated!
Regards
Tom

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-variant: normal;
margin-top: 20px;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
}

h1 {
color: #2582A4;
font-size: 26px;
font-family: Arial, Helvetica, sans-serif;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #000000;
}
h2 {
color: #2582A4;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}



p, ol, ul {
text-align: justify;
}

strong {
font-weight: bold;
color: #000000;
}

a {
color: #65B4D1;
text-decoration: none;
}

a:hover {
text-decoration: none;
color: #2582A4;
}

.box {
margin-bottom: 0;
padding-bottom: 0;
background: url(../images/img07.gif) repeat-x left bottom;
padding-top: 0px;
margin-top: 0px;
}

.bottom {
display: block;
margin-bottom: 0;
padding-bottom: 10px;
background: url(../images/img08.gif) no-repeat left bottom;
padding-top: 0px;
margin-top: 10px;
}
a:visited {
color: #65B4D1;
}
a:active {
color: #65B4D1;
}



.image {
float: left;
padding: 0;
margin-top: 2px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}

.indent {
margin-left: 140px;
}

/* Header */

#header {
width: 928px;
height: 137px;
border-bottom: 3px solid #FFFFFF;
background-color: #74BCD5;
background-image: url(../images/site-heading.jpg);
background-repeat: no-repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

/* Menu */

#menu {
float: none;
width: 928px;
height: 37px;
list-style: none;
background: url(../images/img02.gif) no-repeat;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0px;
margin-top: 100px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
height: 27px;
text-transform: lowercase;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #F6F6F6;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}

#menu a:hover {
background-color: #A9D9EB;
background-repeat: repeat-x;
color: #000000;
}

/* Search */

#search {
float: right;
height: 28px;
margin: 0;
padding: 9px 25px 0 0;
background: url(../images/img03.gif) no-repeat right top;
}

#search fieldset {
display: inline;
margin: 0;
padding: 0;
border: none;
}

#input1 {
width: 164px;
padding: 2px 5px;
background: #FFFFFF;
border: none;
}

#input2 {
height: 20px;
background: #87C4DB;
border: none;
text-transform: lowercase;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}

/* Content */

#content {
width: 928px;
margin: 0 auto;
}

#colOne {
float: left;
width: 238px;
background-repeat: no-repeat;
padding: 0px;
}

#colOne h3 {
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
margin: 3px;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #2582A4;
}


#colOne ul {
margin-left: 0;
padding-left: 20px;
padding-right: 20px;
list-style: none;
}

#colOne li {
padding: 5px 0;
border-top: 1px solid #EFEFEF;
}

#colOne li.first {
border: none;
}

#colTwo {
float: right;
width: 617px;
padding: 30px 40px 0 30px;
background: url(../images/img09.gif) repeat-x;
}

#colTwo h2 {
margin-top: 0;
font-size: 26px;
}

#colTwo h3 {
margin-bottom: 0;
font-size: 18px;
}

#colTwo h4 {
margin-top: 0;
font-size: 11px;
font-weight: normal;
}

#colTwo .box {
margin: 0 -30px 30px -20px;
padding: 0 30px 0 20px;
}

#colTwo .bottom {
margin: 0 0 20px -20px;
padding: 0 0 20px 20px;
}

#logo h1, #logo h2, #logo a {
margin: 0;
padding: 0;
text-decoration: none;
text-transform: lowercase;
text-align: center;
color: #FFFFFF;
}

#logo h1 {
padding-top: 25px;
font-size: 34px;
}

#logo h2 {
margin-top: -5px;
font-size: 12px;
}

/* Footer */

#footer {
clear: both;
width: 928px;
margin: 0 auto;
padding-top: 40px;
background: url(../images/img11.gif) repeat-x;
}

#footer p {
margin: 0;
text-align: center;
}
.imageRight {

float: right;
padding: 0;
margin-top: 2px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.most-important {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
}
.quote {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
a:link {
color: #65B4D1;
}

 

Can we have a look at the website in question here please?

 

Thanks for the quick reply the website is - www.(westlondonclinic).co.uk
Regards
Tom

 

try taking

float:none;

Code (markup):

out from #menu, it's not like it was floating anywhere in the beginning. That should fix it. If it doesn't, take

margin-top:100px;

Code (markup):

out and replace that with

position:relative; top:100px;

Code (markup):

Tell me how that goes.

Regards,
Nick

 

Hi Nick,
Thank you soooo much for helping me out here! i really apprecite your advice and even better it worked! So thank you! have a great weekend
Regards
Tom