Going on a Safari....

[Daphne Ogle]

I can't be any help with the code but will offer my opinion on the  
squashing question.  Of course... it depends :).   For the most part  
I'd say the font size is most important IF the button is still  
recognizable as a button.

My 2 cents...

-Daphne

On Jan 8, 2009, at 1:35 PM, Jacob Farber wrote:

> I'm in need of your opinion (esp. if your a mac user).
> It seems there's an issue when it comes to Safari rendering  
> different font sizes in their input buttons. Small fonts work ok,  
> but once you try to make an button larger, your CSS is ignored and  
> the font-size becomes fixed.
>
> To overcome this, I created a rule that adds a background to the  
> button, rendering it more like a windows button (ugly and all) which  
> allows the font-size to work.
>
> Herein lies the problem. Do you think it's acceptable to squash the  
> native appearance of a form control in order to force it to  
> accomodate other settings? Is it more user-friendly for the font  
> size to render properly or for the form control to look like a  
> native control?
>
> Any ideas?
>
> For the curious, this effect only takes place when the larger font- 
> size classed are used. The CSS looks like this:
>
> @media screen and (-webkit-min-device-pixel-ratio:0) {
>     html[class~='fl-font-size-70'] input[type=submit],
>     html[class~='fl-font-size-70'] input[type=button] {padding:0 1em}
>
>     html[class~='fl-font-size-80'] input[type=submit],
>     html[class~='fl-font-size-80'] input[type=button] {font-size: 
> 0.8em !important; padding:0 1em}
>
>     html[class~='fl-font-size-90'] input[type=submit],
>     html[class~='fl-font-size-90'] input[type=button] {font-size: 
> 0.9em !important; padding:0 1em}
>
>     html[class~='fl-font-size-100'] input[type=submit],
>     html[class~='fl-font-size-100'] input[type=button] {font-size: 
> 1em !important; padding:0 1em}
>
>     html[class~='fl-font-size-110'] input[type=submit],
>     html[class~='fl-font-size-110'] input[type=button] {background- 
> color:#fff; font-size:1.1em !important; padding:0 1em}
>
>     html[class~='fl-font-size-120'] input[type=submit],
>     html[class~='fl-font-size-120'] input[type=button] {background- 
> color:#fff; font-size:1.2em !important; padding:0 1em}
>
>     html[class~='fl-font-size-130'] input[type=submit],
>     html[class~='fl-font-size-130'] input[type=button] {background- 
> color:#fff; font-size:1.3em !important; padding:0 1em}
>
>     html[class~='fl-font-size-140'] input[type=submit],
>     html[class~='fl-font-size-140'] input[type=button] {background- 
> color:#fff; font-size:1.4em !important; padding:0 1em}
>
>     html[class~='fl-font-size-150'] input[type=submit],
>     html[class~='fl-font-size-150'] input[type=button] {background- 
> color:#fff; font-size:1.5em !important; padding:0 1em}
> }
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work

Daphne Ogle
Senior Interaction Designer
University of California, Berkeley
Educational Technology Services
daphne at media.berkeley.edu
cell (510)847-0308