FireFox vs IE for CSS

I have the following lines in my HTML

heading {font-family: Tahoma, serifSansSerifMonospace; font-weight: bold; font-size: 150%}
url {font-family: Tahoma, serifSansSerifMonospace; font-weight: bold; font-size: 90%}
rating {font-family: Tahoma, serifSansSerifMonospace; font-size: 90%}
formtitle {font-family: Tahoma, serifSansSerifMonospace; font-weight: bold; font-size: 90%}
description {font-family: Tahoma, serifSansSerifMonospace; font-size: 90%}
small {font-family: Tahoma, serifSansSerifMonospace; font-size: 75%}
pagenumbers {font-family: Tahoma, serifSansSerifMonospace; font-size: 75%}

Now when I view pages with FireFox (my normal browser) everything looks fine, however when I load my page in IE none of the styles work. Anyone have any ideas what I'm doing wrong?

Cheers

 

Perhaps change: font-family: Tahoma, serifSansSerifMonospace;

to: font-family: Tahoma, serif, sans-serif, monospace;

 

Thanks, I tired it and no joy. Still not working in IE. Any more ideas anyone?

 

What's not working about them? Or post a link.

 

Post a link. You haven't put a semi-colon after the font-size values. i.e. font-size: 150%;

 

If those are classes try added a dot before each one...
i.e.

.heading {font-family: Tahoma, serifSansSerifMonospace; font-weight: bold; font-size: 150%}

If they are ID's you need to add the #

i.e.

#heading {font-family: Tahoma, serifSansSerifMonospace; font-weight: bold; font-size: 150%}

 

A semi-colon is not necessary there.

sanjayc, your selectors are formatted as if they were tags, but there is no heading, url, rating, formtitle, description, or pagenumbers tags in HTML. It doesn't seem like any browser should apply these CSS rules.

As the others have said, attach the page and CSS to a post here, or post a link to the problem page.

 

Thanks folks, here is the whole css section.

<link rel="stylesheet" type="text/css" href="styles.css">
<style type="text/css">
<!--
a:link {color: #000000} /* unvisited link */
a:visited {color: #000000} /* visited link */
a:hover {color: #000000} /* mouse over link */
a:active {color: #000000} /* selected link */

heading {font-family: Tahoma, serifSansSerifMonospace; font-weight: bold; font-size: 150%}
url {font-family: Tahoma, serifSansSerifMonospace; font-weight: bold; font-size: 90%}
rating {font-family: Tahoma, serifSansSerifMonospace; font-size: 90%}
formtitle {font-family: Tahoma, serifSansSerifMonospace; font-weight: bold; font-size: 90%}
description {font-family: Tahoma, serifSansSerifMonospace; font-size: 90%}
small {font-family: Tahoma, serifSansSerifMonospace; font-size: 75%}
pagenumbers {font-family: Tahoma, serifSansSerifMonospace; font-size: 75%}
-->
</style>

The page is http://www.in4matrix.co.uk/search This page looks fine in firefox, all the css tags work but no luck in IE.

Thanks for all your help much appreciated!!!

 

Ultimately the problem lies with your HTML code. You are using tags that do not exist in HTML: HEADING, FORMTITLE, URL, RATING, and DESCRIPTION tags all appear in the page, but none of them are HTML tags.

 

That Firefox allows the faux elements to be rendered is a holdover from its xhtml parser. XHTML allows you to make up your own elements, but to be correct, you must properly extend your DTD.

You haven't properly extended the DTD, in fact, you haven't even published your DTD. Nor, are you using xhtml as xml, anyway.

Correct your errors first. I suggest you study some html tutorials and learn how to mark up your content.

cheers,

gary

 

Two words: CSS Validator

Oh, and don't make your visited links and unvisited links the same color. Visitors like to know where they've been.

--Tony
Webmaster, www.PaidOnlineSurveyCenter.com