# Probably OT, but CSS Help? **URL:** \ **Category:** Rails\ **Created:** [March 10, 2008, 8:33pm UTC](https://www.ruby-forum.com/t/probably-ot-but-css-help/131507 "2008-03-10T20:33:29Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![sw0rdfish](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sw0rdfish](https://www.ruby-forum.com/u/sw0rdfish)\ **Post date:** [March 10, 2008, 8:33pm UTC](https://www.ruby-forum.com/t/probably-ot-but-css-help/131507/1 "2008-03-10T20:33:29Z")
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](http://farm4.static.flickr.com/3270/2324997408_15c44763e5_b.jpg) \*apologies to flickr for the improper linking. Any help would be great, thanks ---
**Author:** ![sw0rdfish](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sw0rdfish](https://www.ruby-forum.com/u/sw0rdfish)\ **Post date:** [March 10, 2008, 9:04pm UTC](https://www.ruby-forum.com/t/probably-ot-but-css-help/131507/2 "2008-03-10T21:04:52Z")
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](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. ---
**Author:** ![sw0rdfish](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sw0rdfish](https://www.ruby-forum.com/u/sw0rdfish)\ **Post date:** [March 10, 2008, 9:41pm UTC](https://www.ruby-forum.com/t/probably-ot-but-css-help/131507/3 "2008-03-10T21:41:22Z")
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. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) ---
**Author:** ![sw0rdfish](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sw0rdfish](https://www.ruby-forum.com/u/sw0rdfish)\ **Post date:** [March 11, 2008, 3:41pm UTC](https://www.ruby-forum.com/t/probably-ot-but-css-help/131507/4 "2008-03-11T15:41:39Z")
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. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) ---
**Author:** ![sw0rdfish](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sw0rdfish](https://www.ruby-forum.com/u/sw0rdfish)\ **Post date:** [March 11, 2008, 4:38pm UTC](https://www.ruby-forum.com/t/probably-ot-but-css-help/131507/5 "2008-03-11T16:38:44Z")
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? ---
**Author:** ![sw0rdfish](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sw0rdfish](https://www.ruby-forum.com/u/sw0rdfish)\ **Post date:** [March 11, 2008, 7:40am UTC](https://www.ruby-forum.com/t/probably-ot-but-css-help/131507/6 "2008-03-11T07:40:44Z")
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. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) 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; ---
**Author:** ![sw0rdfish](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/edb3f5/32.png) [@sw0rdfish](https://www.ruby-forum.com/u/sw0rdfish)\ **Post date:** [March 11, 2008, 4:46pm UTC](https://www.ruby-forum.com/t/probably-ot-but-css-help/131507/7 "2008-03-11T16:46:25Z")
nevermind that worked… Thanks John!