Firefox messes up site

[crackafaza]

Hello everyone!
Right, I work in a web design company and there website looks fine in INternet Explorer, but when used in Firefox it completely messes up, I didn't create this website but I was told to try fix it, but i am havin problems, soo I would appreciate it if anyone out there could help me
here is the website :
http://www.bytecraft.co.uk

and below is the css code:

Code: Select all

body {
 margin: 0px 0px 40px 0px;
 background: #FFFFFF url(img/head_bg.jpg) repeat-x; {
}
a, a:visited, a:active {text-decoration: none; color: #333333;}

#button {
 font-size: 17px;
 font-family: arial;
 color: #333333;
}
#button small {
 font-size: 9px;
 font-family: arial;
 color: #666666;
 line-height: 140%;
}
#logo {
 position: absolute;
 top: 0px;
 left: 0px;
 background: url(img/logo.jpg) no-repeat;
 height: 143px;
 width: 217px;
}
#main {
 position: absolute;
 top: 21px;
 left: 233px;
 height: 715px;
 width: 386px;
 background: #FFFFFF;
 border: 1px solid #cccccc;
 padding-left: 2%;
 padding-top: 1%;
 font-size: 12px;
 font-family: Arial, Verdana;
 padding-right: 2%;
}
#main a {
 font-size: 12px;
 font-family: Arial, Verdana;
 color: #536396;
 text-decoration: none;
}
#main a:hover {
 color: #747474;
 text-decoration: underline;
}
#smallbanner {
 position: absolute;
 top: 490px;
 left: 18px;
 background: url(img/sage_microsoft.gif) no-repeat;
 height: 55px;
 width: 190px;
}
#footerbg {
 background: url(img/footer.jpg) repeat-x;
 height: 317px;
 padding-top: 325px;
 padding-left: 10px;
 color: #666666;
 font-size: 12px;
 font-family: arial, verdana;
 line-height: 18px;
}
#footerlink {
 color: #999999;
 font-size: 10px;
 font-family: arial, verdana;
}
#footerlink a {
 color: #999999;
 font-size: 10px;
 font-family: arial, verdana;
}
#footerlink a:hover {
 color: #6D6D6D;
 text-decoration: underline;
}

ul#primary-nav {
 margin-top: 14.3%;
 margin-left: 0%;
 padding: 0;
 width: 232px; /* Width of Menu Items */
 border-bottom: 1px solid #D0D0D0;
 background: #E7E7E7 url(img/button_bg.jpg); /* IE6 Bug */
 height: 45px;
 z-index: 1;
}
ul#primary-nav li {
 position: relative;
 list-style: none;
 background: #E7E7E7 url(img/button_bg.jpg) repeat-x;
 height: 45px;
}
ul#primary-nav li a {
 display: block;
 text-decoration: none;
 color: #000000;
 padding: 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
 height: 45px;
}
 
ul#primary-nav li a:hover {
 background: #E7E7E7 url(img/button_bg_over.jpg);
}
 
/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */

Many Thanks
cracka

[crackafaza]

doesn't matter now I have fixed the problem

[Marc]

Thanks for telling us you fixed it... but how?? Saying you fixed it wont help anyone else in the situation you were in!

[karinne]

Please use a better topic next time!

It would help other with the same problem if you explained how you fixed the problem.

[1840dsgn]

yea...i just wanna add as a general message...its not firefox, or ie that messes up your site. its your code that messes up your site in those browsers!!

just thought id get that off my chest!

[Lchad]

Wow, this guy can't catch a break can he!!!

Glad you got it working!!

[karinne]

I just re-read this thread thinking he came back and notice my post unfinished and bolded!


I was having problems with my keyboard this morning! UGH!!! I wish I could work from home where I know my stuff works properly!

[Skelbo]

It looks like Firefox is not finding your stylesheet.

Try replacing <link href="styles.css" rel="stylesheet" type="text/css">

with <link rel="stylesheet" type="text/css" href="styles.css" />

and see if that helps.

[Blake121]

Yeah, Skelbo's right.

FF isn't displaying your style right. it looks completely different from IE7.

All the links and layout are un-styled. See the screen shot below.