Solved

Firefox Ignores CSS

Posted on 2008-10-07
17
1,031 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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: 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.

 

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Now-a-days, indirectly, postal services have been replaced by email services. Yes, whenever we hear the word "email" a lot of people only think of gmail. Some people still think that email and gmail are one and the same thing :-). Let's see some …
Bada platform is becoming more and more famous this days and people talking about same. Some friends included those who have bada OS mobile asked me "what is bada?"and "what its features?". That encouraged me to research and write this article. [st…
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.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

726 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