Stylesheets - a Safari CSS issue: Can't set monospace font in SELECT html FORM

Author

a Safari CSS issue: Can't set monospace font in SELECT html FORM

Greg Ercolano

2005-01-25, 4:21 am

I'm trying to make a SELECT form that contains monospaced text
where the headings and columns in the text align.

Here's the HTML I've been using that seems to work on all browsers
/except/ safari:

--- snip
<HTML>
<HEAD><TITLE>www-rush</TITLE>
<style type="text/css">
.ttyfont { font-family: monospace; }
</style>
</HEAD>

<FORM METHOD="POST" ACTION="/cgi-bin/test?-post">
<SELECT NAME="Tty" MULTIPLE SIZE=20 CLASS=ttyfont>
<OPTION VALUE="a">IPXXX  Hosts  #Ram  Cpus Priority
<OPTION VALUE="b">MMMM   efgh   1111  999  0
<OPTION VALUE="c">IIII   abcd   9999  999  0
<OPTION VALUE="d">CCCC   wxyz   8888  999  0
</SELECT>
</FORM>

</HTML>
--- snip

I've tried on various platforms, including Mozilla (linux + OSX),
Konqueror, Firefox, and Opera.

Is there a way to make this work correctly, so the SELECT form shows up
in a monospaced font? All the columns should align.

Platform info:
Mac OS X (10.3.6)
Safari Version 1.2.4 (v125.12)

Alexander Clauss

2005-01-26, 7:24 am

Greg Ercolano <erco@3dsite.com> wrote:

> Here's the HTML I've been using that seems to work on all browsers
> /except/ safari:

You can never expect that you can style form fields because when the
browser uses the controls of the operating system (which is done by
Safari and also some other browsers), then the operating system decides
how these controls look like. If you know MacOSX and its "Aqua"
appearance than you'll understand that many of these "Aqua" contaols can
not be styled using CSS, there's no real border or background in these
controls, everything uses complex 3D effects, transparencies etc.

Other browsers which draw all the controls themselves can style form
elements without problem, but then theses controls will look different
to the ones of the operating system.

--
Alexander

Greg Ercolano

2005-01-28, 7:42 pm

> Other browsers which draw all the controls themselves can style form
> elements without problem, but then theses controls will look different
> to the ones of the operating system.

Agreed that GUI toolkits will often have a different look from the OS,
and certainly Apple goes out of its way to make clear guidelines for
the overall look of general applications.

But I can't believe the Aqua guidelines are preventing Safari from being
able to change the fonts of the button and browser widgets it's using
for forms. Both the Cocoa and Carbon APIs are perfectly capable of
changing the fonts of widgets.

A quick visit to Apple's Interface Builder shows the fonts of the
buttons and browsers can be changed to e.g. fixed width fonts:
http://seriss.com/people/erco/tmp/m...dth-widgets.png

For now, the Mac users of the app in question have to use alternate
browsers (Mozilla + Explorer), because this app is very dependent
on the ability to present columnar data in a FORM/SELECT browser.

They'd prefer to use Safari since it does have a nicer interface,
but utility presides over cosmetics here, so for now they can't use it.

Unless the original CSS posted is lacking something, looks like
Safari might need to catch up on its CSS support.