# Solved: Firefox can't see my CSS?



## jtn3833 (Dec 29, 2000)

I'm working on a site, and relatively new to CSS so I know my code needs to be cleaned up, but anytime i view this site in FireFox (3.6.10) all of the positioned by CSS end up in the top left corner of the wrapping div.

It looks perfect in IE, and even in FireFox on different computers. I've been through my settings and can't find anything that looks like it would make any difference.

It's frustrating because I can't test it on the computer I'm using the build it.

the site is http://bigcitycomix.com/test.html
Here's the CSS-------------

@charset "utf-8";
/* CSS Document */

body {
font-family:Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
border: 0px;
}

#wrapper {
width: 960px;
margin: 0 auto 0 auto;
position: relative;

}

br.clear {
clear:both;
}

#container2 {
width: 938px;
height: 615px;
margin: 0 auto 0 auto;
border-top: 5px solid black;
border-left: 5px solid black;
border-right: 5px solid black;
background-image:url(../images/background/new-background-4-16-10.jpg);
background-repeat: no-repeat;
}

#container-white {
margin: 5px auto 0 auto;
width: 942px;
height: auto;

}

/*COMICS BUTTON*/
.image-swap-comics {
width: 85px;
height: 15px;
position: relative;
padding: 0;
margin: 0;
line-height: 85px;
vertical-align: top;
text-align: center;
}

.image-swap-comics em {
display: block;
width: 85px;
height: 15px;
position: absolute;
top: 0;
left: 0;
background: url(../images/nav-11-23/comics.png);
background-position: left;
}

.image-swap-comics a:hover em {
background: url(../images/nav-11-23/comics.png);
background-position: right;
}

/*TOURNAMENT & GAMES BUTTON*/
.image-swap-games {
width: 151px;
height: 38px;
position: relative;
padding: 0;
margin: 0;
line-height: 151px;
vertical-align: top;
text-align: center;
}

.image-swap-games em {
display: block;
width: 151px;
height: 38px;
position: absolute;
top: 25px;
left: 0;
background: url(../images/nav-11-23/games.png);
background-position: left;
}

.image-swap-games a:hover em {
background: url(../images/nav-11-23/games.png;
background-position: right;
}

/*MAP BUTTON*/
.image-swap-map {
width: 43px;
height: 15px;
position: relative;
padding: 0;
margin: 0;
line-height: 86px;
vertical-align: top;
text-align: center;
}

.image-swap-map em {
display: block;
width: 43px;
height: 15px;
position: absolute;
top: 15px;
left: 0;
background: url(../images/nav-11-23/map.png);
background-position: left;
}

.image-swap-map a:hover em {
background: url(../images/nav-11-23/map.png);
background-position: right;
}

.nav {
background-color:#FFF100;
width: 700px;
height: auto;
position: relative;
top: 300px;
left: 119px;
z-index: 50;
border: 5px solid black;
clear: both;
}

.nav2 {
width: 600px;
height: auto;
position: relative;
top: 62px;
left: 313px;
z-index: 50;
clear: both;
}

.menu {
margin: 0;
padding: 0;
width: 616px;
list-style: none;
background: #fff;
}
.menu li {
padding: 0;
margin: 0;
height: 39px;
list-style: none;
background-repeat: no-repeat;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -1000px;
height: 39px;
background-repeat: no-repeat;
}
.comics {background-image: url(../images/nav%204-6-10/comics1.jpg); width: 113px; margin-right: 10px;}
.comics a {background-image: url(../images/nav%204-6-10/comics2.jpg); margin-right: 10px;}
.map {background-image: url(../images/nav%204-6-10/map1.jpg); width: 59px; margin-right: 10px;}
.map a {background-image: url(../images/nav%204-6-10/map2.jpg); margin-right: 10px;}
.games {background-image: url(../images/nav%204-6-10/games1.jpg); width: 328px; margin-right: 10px;}
.games a {background-image: url(../images/nav%204-6-10/games2.jpg); margin-right: 10px;}

ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

#container {
width: 943px;
height: 690px;
margin: 0 10px 0 10px;
border: 5px solid black;
}

#container-map {
width: 945px;
height: 875px;
margin: 0 10px 0 10px;
border: 5px solid black;
}

.center {
vertical-align: top;
width: 869px;
margin: 0 0 0 0;
}

#front_box {
position:relative;
display:block;
}

img.front {
position: absolute;
top: 200px;
left: 285px;
}

.info-box {
background-color:#FFFF00;
width: 700px;
position: absolute;
top: 350px;
left: 135px;
z-index: 50;
border: 5px solid black;
clear: both;
}

.email {
width: 611px;
height: 75px;
position: relative;
top: 51px;
left: 310px;
}

#footer {
position: absolute;
left: 10px;
font-family:Arial, Helvetica, sans-serif;
font-size: 9px;

}
-------------------

I'm working in Dreamweaver, but I don't use its CSS palette, I hand code it in.

Any thoughts?
Thanks,
jtn


----------



## sepala (May 20, 2010)

I looked through your coding in a fast way, but I didn't find any error. And, YEP...FireFox has that error with div tags. That has happened to me several times.


----------



## jtn3833 (Dec 29, 2000)

What i can't figure out is why the code renders fine on the same version of FF on a different computer. it looks fine in IE & Chrome also, only FF on 1 of my computers, unfortunately it's the computer I use when putting the site together which makes it tough to troubleshoot.


----------



## jdean (Jan 20, 2002)

Run your page through a validator such as http://jigsaw.w3.org/css-validator/ and you'll see that you're missing the closing parenthesis on line 94 of bcc2.css.

Can't tell you why the code renders fine on the same version of FireFox on another machine. If it's not a difference in the settings, perhaps it could be an add-on? If you want to investigate further, try running on both machines using a new profile and making sure that the version is exactly the same.

-- jd


----------



## jtn3833 (Dec 29, 2000)

Excellent - thanks, that was it. I thought Dreamweaver would have let me know about that coding error.

I've bookmarked the validation site for future troubleshooting.

thanks,
jtn


----------

