Cross browser / platform problems with CSS

[Mark Findlay]

I am running into problems trying to get a simple searchbox to display
correctly across various browsers and platforms.

Everything is fine in IE 6.0 on PC (can't we all just use IE :) but when
viewed on other browsers and platforms is when the problems begin.

Here is a simple page I created to illustrate the problem. I also included
screenshots to show how each other browser and platform mangles the original
intent.
http://www.speakeasy.org/~mfindlay/searchbox.htm. Everything is contained in
the htm page so you can view source on it to see the style definitions I am
using.

If anyone can offer any advice on the 2 main issues here:

1) The input box appears even though I have defined a style for it that
should make it invisible
2) On Mac Safari, the searchbox is separated from the arrow image.

I would greatly appreciate it.

[Toby Inkster]

Post by Mark Findlay
I am running into problems trying to get a simple searchbox to display
correctly across various browsers and platforms.
http://www.speakeasy.org/~mfindlay/searchbox.htm

Many browsers choose to disallow or limit the styling of form elements,
simply because allowing authors too much control over them tends to result
in unusable pages.

Say, for example, that I'm a Windows user with limited eyesight. I have
gone into Control Panel, double clicked on "Display", gone to the
"Appearance" tab (this is all from memory, so is probably the wrong way --
I don't use Windows on a regular basis) and chosen a high-contrast, large
print white-on-black colour scheme.

Now my form controls will tend to have a black background with pretty
big white text.
In your style sheet you have put:

input {
font-size: 11px;
color: #330000;
}

Not only will the font size be way too small for me to see what I'm
typing, but also I'll be stuck with really-dark-red text on a black
background which (even at a sane font size) will be illegible.

For that reason, many browsers tend to disallow form styling.

[x-posted, f'ups to alt.html]