Going on a Safari....

Jacob Farber jacob.farber.work at gmail.com
Thu Jan 8 21:35:51 UTC 2009

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}
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20090108/7fd0b20c/attachment.html>

More information about the fluid-work mailing list