Solved

Firefox Ignores CSS

Posted on 2008-10-07
17
1,030 Views
Last Modified: 2013-12-07
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

0
Comment
Question by:bizkit112
  • 8
  • 7
  • 2
17 Comments
 
LVL 4

Expert Comment

by:bastianr
ID: 22660916
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
 

Author Comment

by:bizkit112
ID: 22661800
Thanks for your suggestions, however, neither of the resolved any of the issues I am having.
0
 
LVL 5

Expert Comment

by:sciphre
ID: 22662041
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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:bizkit112
ID: 22662846
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
 
LVL 5

Expert Comment

by:sciphre
ID: 22662977
Did you remove the & (ampersands) ?
0
 
LVL 5

Expert Comment

by:sciphre
ID: 22663195
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
 
LVL 5

Expert Comment

by:sciphre
ID: 22663217
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
 

Author Comment

by:bizkit112
ID: 22663545
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
 

Author Comment

by:bizkit112
ID: 22663587
i also added the quotation marks to the background image tag, and that didn't help either
0
 
LVL 5

Expert Comment

by:sciphre
ID: 22663596
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
 

Author Comment

by:bizkit112
ID: 22663670
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
 

Author Comment

by:bizkit112
ID: 22663724
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
 

Author Comment

by:bizkit112
ID: 22663737
i also had the change the file from test.html to test.txt so that i could upload it
0
 
LVL 5

Expert Comment

by:sciphre
ID: 22663867
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
 
LVL 4

Expert Comment

by:bastianr
ID: 22663869
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
 

Accepted Solution

by:
bizkit112 earned 0 total points
ID: 22669151
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
 
LVL 5

Expert Comment

by:sciphre
ID: 22669236
Can't believe the three of us missed that. I even formatted the damn thing and didn't notice.  
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Problem I downloaded the Microsoft Internet Explorer 9 Beta, today, to give it a test drive and maybe write a review for the site, and it failed miserably and got stuck in a crash restart loop. The error message given is as illustrated below i…
I recently found myself in a Corporate Situation where the client had requested blocking access to any and all websites except his own Domain? Easy? I am sure this would be your answer but their requirement was, this has to be done without using…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question