Probably OT, but CSS Help?

Rails
1

Ok I know this is off topic, but since you guys are usualy so helpful,
I thought I’d try here first.

Building a Rails App and one of the things we’ve done is put a CSS
class of;

  • {
    font-family:“Lucida Grande”,verdana,arial,helvetica,sans-serif;
    margin:0pt;
    padding:0pt;
    }

Now the problem is that the padding setting, for one reason or another
is killing my select boxes in FireFox… If I remove that line, is
fixes the Select boxes, but breaks other stuff in our app that relies
on that… I’m no CSS expert, but I was told the * set helps all
browsers start on the same page to avoid some problems. Now removing
it is an option, but I’m wondering what the attribute is I need to
change, or the element I need to change to get my Select boxes to be
right… when I change the padding on the select boxes themselves, it
just adds padding to the inside of the box and doesn’t make the box
bigger to allow the text inside to fit… here’s a link to a picture
that may help explain what I mean. I’m using FireBug in firefox to
help sort it all out.

http://farm4.static.flickr.com/3270/2324997408_15c44763e5_b.jpg
*apologies to flickr for the improper linking.

Any help would be great, thanks

2

sw0rdfish wrote:

Ok I know this is off topic, but since you guys are usualy so helpful,
I thought I’d try here first.

Building a Rails App and one of the things we’ve done is put a CSS
class of;

  • {
    font-family:“Lucida Grande”,verdana,arial,helvetica,sans-serif;
    margin:0pt;
    padding:0pt;
    }

Now the problem is that the padding setting, for one reason or another
is killing my select boxes in FireFox… If I remove that line, is
fixes the Select boxes, but breaks other stuff in our app that relies
on that… I’m no CSS expert, but I was told the * set helps all
browsers start on the same page to avoid some problems. Now removing
it is an option, but I’m wondering what the attribute is I need to
change, or the element I need to change to get my Select boxes to be
right… when I change the padding on the select boxes themselves, it
just adds padding to the inside of the box and doesn’t make the box
bigger to allow the text inside to fit… here’s a link to a picture
that may help explain what I mean. I’m using FireBug in firefox to
help sort it all out.

http://farm4.static.flickr.com/3270/2324997408_15c44763e5_b.jpg
*apologies to flickr for the improper linking.

Any help would be great, thanks

Your wildcard selector assigns the font-family declaration to all DOM
elements, and I think that is causing your problems. I would only assign
the font-family to the body, and leave the padding/margin resets on the
wildcard.

Select boxes and inputs generally choose their own font stylings, and if
you try to override them they can cause all kinds of mischief, as you’ve
seen! It’s perfectly feasible to override the fonts on selectors and
inputs (although Safari makes things extra tricky with aqua), but you’ll
find it easier if you play by their rules.

However, if you want to keep the font-family declaration where it is,
you could explicitly state the length of the selectors in ems (so that
it’ll scale with the font-size).

p.s. if you want a great, clean-sheet CSS platform to build from, take a
look at the YUI reset.css file.

3

Yeah but removing the PADDING option in the wildcard is what fixes the
issue, not the font… which is what has me puzzled.

On Mar 10, 4:04 pm, Neil C. [email protected]

4

sw0rdfish,
try
select option {
margin-bottom: 8px;
margin-right: 100px;
margin-top: 2px;
}

that way any option tag that follows a select tag will have those
attributes.
(or you could just use the option tag.)
The text is still very tight in Opera 9.26 on widows XP
all the rest are fine (Flock, firefox, safari, IE7 and IE8 beta)

hth

John I.

On Mar 11, 1:40 am, Neil C. [email protected]

5

Nope… no luck.

What has me puzzled is that if I remove the padding: 0pt; on the
wildcard, it looks fine.

So what is that resetting that is messing it up?

6

sw0rdfish wrote:

Yeah but removing the PADDING option in the wildcard is what fixes the
issue, not the font… which is what has me puzzled.

On Mar 10, 4:04�pm, Neil C. [email protected]

Ok - I remember setting the font-family on selectors and it causing
problems because fonts render differently - sorry that isn’t the right
answer for you.

Just to clarify, you are talking about the selectors cutting the words
short on the right-hand side, aren’t you?

Have you tried setting a disproportionate padding-right on the inputs,
or giving them a width attribute?

The YUI reset.css may fix your problems. You can give it a quick test
drive by removing your wildcard declaration (but still keeping the rest
of your styles) and calling the reset file from Yahoos own servers;

7

nevermind that worked…

Thanks John!