CSS and firefox

[dkin]

I am creating a very basic page for a client.

I have displayed this page fine in IE and Netscape before, today I downloaded Firefox and this does not seem to support css.

This is my stylesheet.

.menu {text-align:"Center"; background-color:"#A5DAFF"; vertical-align: "top"; }
.title {background-color:"FFC2FD"; vertical-align: "top"; }

if you view the page with IE it looks fine even using CSS, if you view it with FF it looks awful.

Please, suggestions.

<Sorry, no personal links. See TOS [webmasterworld.com]>

[edited by: tedster at 6:24 am (utc) on July 26, 2004]

[bedlam]

Hiya,

The first thing you should do - before a moderator does it for you - is remove that link. See item 13 in the TOS [webmasterworld.com].

Then for anyone to help, please post a bit of the relevant markup.

As for this:

I have displayed this page fine in IE and Netscape before, today I downloaded Firefox and this does not seem to support css.

...it almost sounds like a wind-up ;-) In any case, you've got it the wrong way round. Firefox renders the w3c standards better than any other browser except maybe Opera, while IE's support for CSS is incomplete, non-standard, buggy and sometimes just plain weird.

But to the problem at hand, your CSS is full of errors. You don't quote property assignments in css the way you do html attributes. You should have something like:

text-align:center";

You may want to check out the resources in the css forum's charter [webmasterworld.com] (at the bottom of the page) and the css forum library [webmasterworld.com] for more information on css syntax.

-B

[edited by: bedlam at 6:38 am (utc) on July 26, 2004]

[tedster]

To help we need to know what "looks awful" means. Is it a text alignment problem, or extra space around images, or whatever it is.

What is your DTD? And have you validated your HTML [validator.w3.org] and CSS [jigsaw.w3.org] with the W3C's free validation service? Given bedlam's observations, I would assume you have not.

Validation is step number one - and congratulations on moving to support standard browsers. It is a learning curve, but soon you will appreciate it very much, I think. It's quicker to develop in Firefox and then fix any little problems you seen in IE than it is to begin in IE, which is a) non-standard and b) hides errors from you that you really should know about.

[dkin]

my HTML for the data cell was something like this.

<td width="15%" align="center" valign="top">

then I changed it to this.

<td width="15%" class="menu">

In IE both look great.

In FF all is left aligned, no bgcolors were added.

What can I do to change this?

[SuzyUK]

dkin...

.menu {text-align:"Center"; background-color:"#A5DAFF"; vertical-align: "top"; }
.title {background-color:"FFC2FD"; vertical-align: "top"; }

change to this..

.menu {text-align: center; background-color: #A5DAFF; vertical-align: top; }
.title {background-color: #FFC2FD; vertical-align: top; }

that is do not use quote marks in CSS rules and also there was a missing # before one of the colors..
IE is just being forgiving as usual ;)

Suzy

[encyclo]

You might want to aquaint yourself with the excellent W3C CSS validator - it will help you catch errors in your CSS which often cause rendering problems in browsers.

[jigsaw.w3.org...]

The validator would have shown all of the errors in this case.

[dkin]

looks good now. Thanks guys.