RoR with CSS on Firefox?

Rails
1

Does anybody have any experience getting CSS working with RoR on
Firefox? I need help!!!

I’m trying to move to the

model from the model so I can
use AJAX. The move to
s requires I also start using CSS for
layout, etc.

So here’s the problem I’m having.

Firefox will not use the styles I’ve defined for the

s. They never
change color as expected (that’s all the styles define) though they do
in IE. I’m using Firebug with Firefox and, in addition to not
displaying as expected, I get an error everytime I try to access the
Style tab. I know that it’s finding / using the stylesheet though,
because I have another entry in there that does get used.

Also, I have an image in the banner that’s not displaying either. Yet
if I right click on the place holder and select “View Image” it pulls it
up just fine.

I’m going crazy here!!! Can someone please help?!?!?

Thanks in advance,
Bill

2

If some of your css is working then ror is working fine with your css.
Try checking out some of the many css forums.

3

Bill,
It sounds as if your developing in IE. Don’t develop using IE. It’s a
hard habit to break but once you do your life will become easier. Use
FireFox then correct the CSS to accommodate IE flaws such as the Box
Model Hack etc. Believe me it’s much easier this way.

I’m not sure but it sounds as if your developing RoR and your look and
feel at the same time. If you are, try designing the page look in your
favorite editor. Then move the CSS to RoR and carve up the elements of
the page and stick them in the view/s helper/s etc…

Hope this helps.
Scott

4

Hi Scott (and Jason and Dean),

Good advice from all. Turns out the problem was that IE could work with
‘background: fcc’ but Firefox needed ‘background-color: #fcc’. I
didn’t
know about the online validation tools and did join / contact the
css-discuss list. They showed me how to fix the initial problem and
pointed
me to the validation tools. What I’ve got works now but I’m getting
warnings in the validation tools: “You have no color with your
background-color :” ;-p

There really is a lot to learn to move from tables to CSS. I’m trying
to
see it as an ‘opportunity’ :wink:

Thanks for your help!

Best regards,
Bill
----- Original Message -----
From: “Scott” [email protected]
To: [email protected]
Sent: 2006-04-05 3:58 PM
Subject: [Rails] Re: RoR with CSS on Firefox?

5

Hi Tom,

Tom D. wrote:

Also, for some CSS inspiration check out
the CSS Zen Garden at http://csszengarden.com.
It is a great way to learn how to do CSS by
example.

I saw Zen Garden and thought something like “That’s cool. I can see
where
that could be a real timesaver WRT responding to customer change
requests
and such. But if I wasn’t too pressed for time, I could probably do any
one
of those with tables.”

Then I found Eric Meyer’s site. Use Firefox to checkout
http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html and the
links off it.
They got me to “Damnit man!!! Screw tables. I gotta learn this.” I
can
tell it’s going to be a steep climb. But now I’m convinced.

Best regards,
Bill

6

Hi Bill,

background works fine with Firefox. The missing ingredient was the #
sign. Firefox needs it unless you are specifying the named colors
such as background:blue;

So, this should work as well:

background: #fcc;

Also, for some CSS inspiration check out the CSS Zen Garden at
http://csszengarden.com. It is a great way to learn how to do CSS by
example.

Good luck to you. CSS can be painful to learn, but once you get the
hang of it you will never go back.

Tom

On 4/5/06, Bill W. [email protected] wrote:

There really is a lot to learn to move from tables to CSS. I’m trying to
Subject: [Rails] Re: RoR with CSS on Firefox?

favorite editor. Then move the CSS to RoR and carve up the elements of
http://lists.rubyonrails.org/mailman/listinfo/rails

Rails mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails

–
Tom D.

http://blog.atomgiant.com
http://gifthat.com

7

Hi Alan,

Alan F. wrote:

I can strongly recommend
“Headfirst XHTML + CSS”. Early material is
quite basic, but still worth consuming. The
later material is where it gets interesting, but
they (and I) stress it’s worth working your way
through carefully.

http://www.amazon.com/gp/product/059610197X/

Thanks very much for the pointer. I’ll definitely pick it up.

Best regards,
Bill

8

Bill W. wrote:

Hi Scott (and Jason and Dean),

Good advice from all. Turns out the problem was that IE could work with
‘background: fcc’ but Firefox needed ‘background-color: #fcc’. I
didn’t
know about the online validation tools and did join / contact the
css-discuss list. They showed me how to fix the initial problem and
pointed
me to the validation tools. What I’ve got works now but I’m getting
warnings in the validation tools: “You have no color with your
background-color :” ;-p

Hil Bill,

The warning is hjust a warning, like defining equals and hashcode
together in Java, it’s a good idea to define color and background-color
together (so you don’t end up with black on black :slight_smile:

I can strongly recommend “Headfirst XHTML + CSS”. Early material is
quite basic, but still worth consuming. The later material is where it
gets interesting, but they (and I) stress it’s worth working your way
through carefully.

http://www.amazon.com/gp/product/059610197X/

Alan

9

Scott wrote:
> Use FireFox then correct the CSS to accommodate IE flaws such as
the Box
> Model Hack etc. Believe me it’s much easier this way.

It’s not that simple/black and white: for a new project, I’ve been
developing on Mac + Firefox for a month and we’ve just started testint
on IE! result : Kaboum.

  • Autocompletion doesn’t work
  • Ajax is dog slow (5-10x slower) on IE
  • loads of tiny css problems.

If your app needs to support IE, check regularly that no big problem has
sneaked into your code.

Alain