Font CSS code not working in Fire Fox - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Font CSS code not working in Fire Fox

My CSS font code works for IE but not FireFox.

katiejohnson

11:42 pm on Jan 16, 2007 (gmt 0)

10+ Year Member

My coding for the font style doesn't work in firefox for my personal websites, but the coding works for myspace and livejournal while using both IE and FireFox. I'm getting some hanus headaches over this, please, can someone help me figure this out? Also, before you go look, my pages are set up in popup windows for organizational reasons and so it looks basically the same on any screen resolution 800x600 or better.

Here's my CSS coding:
<style type="text/css">

A:link
{ text-decoration: value;underline overline; color:#000000; }
A:visited
{ text-decoration: value;line-through; color:#000000; }
A:active
{ text-decoration: value; underline overline; color:#000000; }
A:hover
{ text-decoration: value; blink; color:#000000;

background-image: url(aboutbottom.png);
background-color: #ffffff;

h1 {font-family: value;arial rounded mt bold, arial;
color: value; ff0000 }

p, A:text, A:font, A:form {font-family: value; arial;
color: 000000; }

body
{ background: #ffffff;
background-image: url(aboutbottom.png);
background-repeat: repeat-y;
background-position: bottom left;
background-attachment: fixed;

font-family: arial;
color: #000000 ;
letter-spacing: 1pt;
font-weight: normal;
font-size: 10pt;

scrollbar-face-color : #ffffff;
scrollbar-highlight-color : #ffffff;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #ffffff;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #ffffff;
scrollbar-arrow-color : #000000;

margin-top: 50;
margin-bottom: 100;
margin-left: 100;
margin-right: 100;
padding-top: 5;
padding-bottom: 5;
padding-left: 5;
padding-right: 5;
}

td, A:text, A:form
{ font-family: arial;
color: #000000;
padding: 0px; }

input, textarea
{ background: #ffffff url();
font-family: arial;
color: #000000;
border-style: solid;
border-color: #000000;
border-width: 1px; }

</style>

[edited by: encyclo at 2:29 am (utc) on Jan. 17, 2007]
[edit reason] no links to personal sites please, see forum charter [/edit]

katiejohnson

11:50 pm on Jan 16, 2007 (gmt 0)

10+ Year Member

oh, i just started this whole thing last night, so i know there's literally no content to my pages as of current, but there will be later on.

Setek

12:53 am on Jan 17, 2007 (gmt 0)

10+ Year Member

If you take a look at this:

Results of CSS validation for one of your pages [jigsaw.w3.org]

The W3C CSS Validator is saying you have a few parse errors - basically, any standards-compliant browser (read: Firefox, Opera, Safari) should return an error and not be able to render any of that code.

On this page, at least, I believe the reason is this:

A:hover
{ text-decoration: blink; color:#ff0000;

background-image: url();
background-color: #ffffff;

h1 {font-family: arial rounded MT bold; color: 000000; }

If you'll notice, you forgot to have a closing brace (}) to mark the end of your

A:hover

rule, so thus, a standards-compliant browser will interpret the entire rest of your stylesheet as part of

A:hover

.

You also shouldn't have embedded styles within the body - embedded styles should only go within the

<head> ... </head>

section. i.e.:

<head>
<title>document title</title>
<style type="text/css">
...
</style>
</head>
<body>
...
</body>

Also, any property value that is more than one word needs to be encapsulated:

font-family: arial rounded MT bold;

needs to be:

font-family: 'arial rounded MT bold';

It's a good idea to have backup fonts, just in case somebody doesn't have that particular font:

font-family: 'arial rounded MT bold', Arial, Helvetica, sans-serif;

Remember to use the CSS and HTML validators:

[jigsaw.w3.org...]

[validator.w3.org...]

There are a lot of things on your website you really should scrutinize, like the use of frames, and the use of tables for layout, but I'm guessing you're just starting out at this so you can learn as you go along :)

katiejohnson

1:17 pm on Jan 17, 2007 (gmt 0)

10+ Year Member

thanks, i never would have noticed that little itty bitty detail, which is none the less important. i've actually been doing my own HTML since fourth grade. I'm not a master at it, but I know more than most about it. [most being people who don't know html at all, haha]

As for the tables versus frames and stuff, I used frames so the pages wouldn't have to reload every time a link is clicked, I actualy dispise having to reload pages.

Thank you very much for helping me though, i appreciate it.

Setek

1:47 pm on Jan 17, 2007 (gmt 0)

10+ Year Member

As for the tables versus frames and stuff, I used frames so the pages wouldn't have to reload every time a link is clicked, I actualy dispise having to reload pages.

That's fair enough, and nobody can force you to do something a certain way, but just so you know both sides of the fence:

Using frames ruins many accessibility features, such as hierarchical portrayal of document structure;
If a user wanted to share a particular page's URI with somebody, the link in the address bar does not properly coincide with the page you are on.

Using tables ruins many accessibility features, also like hierarchical portrayal of document structure, not to mention using a table for presentation of data rather than tabular data itself;
SEO issues with the 'content' section difficult to find, within tables (often nested tables.)

There are many more but I'm tired and I'm going to bed :)

Still, one good thing about frames is that you only have to change repeated data in one spot - then again, that's what includes are for (PHP/ASP/Server side.)

CSS-Presentation takes getting used to, but there are much more accessibility and SEO benefits to outweigh it. Especially for Government contracts, where in Australia require WAI Accessibility Level 1 as per minimum :)

.. but each to their own, if I haven't given you enough good reasons :)