Firefox Ignores CSS

I have two questions in regard to Firefox ignore my stylesheet.

First, firefox is ignoring the font size in my class.  Second, firefox is ignoring the background image in my class.  

On IE, the page loads fine and looks correct.  The classes in my stylesheet are:

.FooterLinks
{
      font-family: "Verdana", Times, serif;
      font-size: 7.5 pt;
      color: #FFFFFF;
      text-decoration: none;
}

.FooterLinks A
{
      font-family: "Verdana", Times, serif;
      font-size: 7.5 pt;
      color: #FFFFFF;
      text-decoration: none;
}

.FooterBackground
{
      background-image: url(../images/footerbackground.jpg);
      width: 575 px;
      background-repeat:no-repeat;
}
<table width="575" border="0" cellpadding="0" cellspacing="0">
				<tr height="31">
					<td width="13" height="31"><img src="../images/menushadow.jpg" width="13" height="31" border="0"></td>
					<td width="562" height="31" bgcolor="#FFFFFF"><img src="../images/spacer.gif" width="562" height="31" border="0"></td>
				</tr>	
				<tr height="69">
					<td width="575" height="69" class="FooterBackground" colspan="2">
						<table width="575" valign="top" align="center" border="0" cellpadding="0" cellspacing="0">
							<tr valign="top">
								<td width="575" height="40" valign="top" colspan="4">
									<table width="575" height="40" border="0" cellpadding="0" cellspacing="0">
										<tr valign="top">
											<td class="Footerlinks" align="center" colspan="3">
												<a href="../index.php">Home</a><img src="images/blank.gif" width="3" border="0">|<img src="images/blank.gif" width="3" border="0">
												<a href="../preforeclosure/content.php?menu_ID=827&parent_ID=6">PreForeclosure</a><img src="images/blank.gif" width="3" border="0">|<img src="images/blank.gif" width="3" border="0">
												<a href="../propertyforsale/content.php?parent_ID=2&menu_ID=109&listingtype=3">Property for Sale</a><img src="images/blank.gif" width="3" border="0">|<img src="images/blank.gif" width="3" border="0">
												<a href="../propertyforsale/content.php?menu_ID=809&parent_ID=3&listingtype=4">Rentals</a><img src="images/blank.gif" width="3" border="0">|<img src="images/blank.gif" width="3" border="0">
												<a href="../search.php?parent_ID=2&menu_ID=112">Search</a><img src="images/blank.gif" width="3" border="0">|<img src="images/blank.gif" width="3" border="0">
												<a href="../aboutus/articles.php?menu_ID=117&parent_ID=5">Articles</a><img src="images/blank.gif" width="3" border="0">|<img src="images/blank.gif" width="3" border="0">
												<a href="../aboutus/content.php?parent_ID=5&menu_ID=113">About Us</a><img src="images/blank.gif" width="3" border="0">|<img src="images/blank.gif" width="3" border="0">
												<a href="../aboutus/contactus.php?menu_ID=116&parent_ID=5">Contact Us</a>
											</td>
										</tr>
										<tr valign="top"><td class="Footerlinks" align="center" colspan="3"><img src="images/blank.gif" height="5"></td></tr>
										<tr valign="top"><td class="Footerlinks" align="center" colspan="3">All Rights Reserved.&nbsp;&#169;&nbsp;<?php echo date('Y');?> The Coloney Group</td></tr>
									</table>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>

Open in new window

bizkit112Asked:
Who is Participating?
 
bizkit112Connect With a Mentor Author Commented:
Thanks for your help, i found the root of the problem.  The first part of my style sheet:

BODY {background: "#00002f"; font-family: "Verdana", Times, serif; font-size: 8 pt; color: #666666; text-decoration: none;


.....didn't have an ending braces which i think caused firefox to ignore the rest of the classes.
0
 
bastianrCommented:
There are a couple issues here, whitespace and case sensitivity.

First try removing the space between the numbers and the units, i.e. 7.5pt instead of 7.5 pt, 575px vs 575 px.

Second, make sure the case in the class names match exactly. td class="Footerlinks" doesn't match .FooterLinks. .FooterLinks A should probably be written as .FooterLinks a  

Not sure about the differences between IE & FF, it probably depends on your DTD. Firefox is usually stricter.
0
 
bizkit112Author Commented:
Thanks for your suggestions, however, neither of the resolved any of the issues I am having.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
sciphreCommented:
Your stylesheet works fine on my pages, so it's probably a HTML issue.

Please try replacing your & (ampersands) in your URLs with &amp; , as using & directly in HTML confuses browsers, who will expect a semicolon terminated character identifier string after it.

http://www.htmlhelp.com/tools/validator/problems.html#amp
0
 
bizkit112Author Commented:
I separated the code and just used the table i posted here and just the classes posted above in the style sheet to isolate this one section of code and see if maybe something else somewhere in the file was affecting the output.  However, when i created a test page with the table above, a style sheet containing only those 3 classes, and put the image in the same directly, i still had the same problems.
0
 
sciphreCommented:
Did you remove the & (ampersands) ?
0
 
sciphreCommented:
Right,

Follow-up:

As Bastian said, you need to remove spaces from the units
As i said, you need to replace & with &amp;

Extra: for the background image to work, you need to use: background-image: url("../images/footerbackground.jpg");

Instead of: background-image: url(../images/footerbackground.jpg);
0
 
sciphreCommented:
Completely off topic, but as a recommendation:
Stop styling the cells directly, the height, width, align, valign, etc properties don't exist in HTML 4.01 Strict, and you should be aiming for XHTML anyway.

Move all cell/table styles to CSS ids, classes, or element styles.
0
 
bizkit112Author Commented:
i created a file called test.asp with the information listed above
no & in that file name.

i remved the spaces in the font size

....still no luck in getting it to work
0
 
bizkit112Author Commented:
i also added the quotation marks to the background image tag, and that didn't help either
0
 
sciphreCommented:
Attach the file please, and tell us what you expect from it, I just tested the above code in FF3 with my recommendations:
- font size applies
- font color applies
- table width applies
- image shows
0
 
bizkit112Author Commented:
if you open:  
http://www.gocoloney.com/propertyforsale/content.php?parent_ID=2&menu_ID=109&listingtype=3
in IE and look at the footer at the bottom of the page, thats what it is supposed to look like.  

i have isolated the footer only in the code attached in this zip file.  The file displays everything fine in IE, but in firefox, the font size is ignored as well as the background image.
0
 
bizkit112Author Commented:
sorry, it wouldn't allow me to attach the style.css file, so the contents of that file is listed below.

BODY {background: "#00002f"; font-family: "Verdana", Times, serif; font-size: 8 pt; color: #666666; text-decoration: none;
div p a table td {font-family: "Verdana", Times, serif; font-size: 8 pt; color: #666666; text-decoration: none;}


.FooterLinks
{
      font-family: "Verdana", Times, serif;
      font-size: 7.5pt;
      color: #FFFFFF;
      text-decoration: none;
}

.FooterLinks a
{
      font-family: "Verdana", Times, serif;
      font-size: 7.5pt;
      color: #FFFFFF;
      text-decoration: none;
}


.FooterBackground
{
      background-image: url("footerbackground.jpg");
      width: 575px;
      background-repeat:no-repeat;
}
test.zip
0
 
bizkit112Author Commented:
i also had the change the file from test.html to test.txt so that i could upload it
0
 
sciphreCommented:
This works:
1) styles.css, not style.css - you probably knew this but hey, callum like I seeum.
2) I formatted your CSS file - CSS formatting is very twitchy, respect it or it will cause you pain
3) I removed the quotes from one of the colours, you don't quote colours when you address them by #RGB
4) I didn't touch your ampersands, seems it's not entirely needed, but you want to get rid of them, they WILL cause you pain

I can recommend http://www.w3schools.com/css/ as an exceptionally accessible reference on CSS and XHTML.
test.zip
0
 
bastianrCommented:
I see that your page displays very differently in FF3. I ran your CSS file through the W3C validator. There are a lot of syntax errors that are likely the cause of many Firefox issues.
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.gocoloney.com%2Fpropertyforsale%2Fcontent.php%3Fparent_ID%3D2%26menu_ID%3D109%26listingtype%3D3
Many of these can be fixed by removing the space between the value and unit. Firefox is definitely more strict with CSS rendering. It might be getting hung up on an error early in the file and giving up. Often fixing problems in one part of the file will clear up other issues below that aren't behaving as expected.
You might also run the HTML through a validator to make sure that it's at least well-formed / valid. HTML errors can also throw the FF parser.
In general, it would be advisable to use a DTD that triggers standards-mode if you want to get the best possible cross-browser consistency.
0
 
sciphreCommented:
Can't believe the three of us missed that. I even formatted the damn thing and didn't notice.  
0
All Courses

From novice to tech pro — start learning today.