Solved

Firefox Ignores CSS

Posted on 2008-10-07
17
1,023 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
 

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I spend far too much time on the web keeping up with the news: politics, the environment, computer stuff, the Experts Exchange. It's never-ending. But many of the most informative web pages are overwhelmed with noise: scrolling banners, flashing tex…
Due to recent concerns over the inevitable depletion of the current pool of IPv4 addresses and the desire to provide additional functionality for modern devices, an upgrade to IPv6 on my Internet connection was needed for me to explore the world of …
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

707 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now