CSS and Submit Button problem (across browsers)

[Daniel Kaplan]

Sorry, I posted this in ...authoring.ht ml newgroup, and only just found this
newsgroup. Sorry for the double post:

Morning,

I just added the CSS style below* to my CSS page and then used the class on
type="submit" whereever I use a Submit button for a form. Just wanted to
make the buttons stick out a little more is all.

Well it turns out that when I do this, both FireFox and Netscape show the
button as if it were an image file. In other words the "simulated push"
don't work. Although everything works great in IE and Opera.

As I said, all I wanted to do was add some spice to the buttons, but if this
won't work across browsers I can't! Looks horrible.
So I guess my quesiton is, is this the case, or perhaps did I make a mistake
in my code that was minor enough that only some browsers picked it up?

Thanks,

Daniel
* here is the how I reference the class:
<input class="my_butto n" type="submit" value=" Search ">

* here is the class definition in my CSS Style Sheet:
input.my_button
{
#background:#DD DDDD;
font-weight: 600;
font-variant: small-caps;
padding: 1px;
border: 2px outset #7777CC;
}

[Christian Kirsch]

Daniel Kaplan schrieb:

Sorry, I posted this in ...authoring.ht ml newgroup, and only just found this
newsgroup. Sorry for the double post:

Morning,

I just added the CSS style below* to my CSS page and then used the class on
type="submit" whereever I use a Submit button for a form. Just wanted to
make the buttons stick out a little more is all.

Well it turns out that when I do this, both FireFox and Netscape show the
button as if it were an image file. In other words the "simulated push"
don't work. Although everything works great in IE and Opera.

AFAIK, input elements are not necessarily styleable. This is discussed
to some length on several websites -> google might help.

[Klaus Krtschil]

Daniel Kaplan schrieb:

Sorry, I posted this in ...authoring.ht ml newgroup, and only just found this
newsgroup. Sorry for the double post:

Morning,

I just added the CSS style below* to my CSS page and then used the class on
type="submit" whereever I use a Submit button for a form. Just wanted to
make the buttons stick out a little more is all.

Well it turns out that when I do this, both FireFox and Netscape show the
button as if it were an image file. In other words the "simulated push"
don't work. Although everything works great in IE and Opera.

As I said, all I wanted to do was add some spice to the buttons, but if this
won't work across browsers I can't! Looks horrible.
So I guess my quesiton is, is this the case, or perhaps did I make a mistake
in my code that was minor enough that only some browsers picked it up?

Thanks,

Daniel
* here is the how I reference the class:
<input class="my_butto n" type="submit" value=" Search ">

* here is the class definition in my CSS Style Sheet:
input.my_button
{
#background:#DD DDDD;
font-weight: 600;
font-variant: small-caps;
padding: 1px;
border: 2px outset #7777CC;
}

Hi,

you can use

input.my_button :active
{
border: 2px inset #7777CC;
}

to get the "push" feeling back.

However I cannot try it on IE (Linux here).
Klaus
--
Linux User #54760
Fingerprint: 890bdbdeaa3ddab 07bac87a3115d55 3a

[Daniel Kaplan]

"Klaus Krtschil" <kl****@gmx.d e> wrote in message
news:44******** ****@individual .net...

you can use

input.my_button :active
{
border: 2px inset #7777CC;
}

to get the "push" feeling back.

However I cannot try it on IE (Linux here).

Same results...Anoth er person wrote that as far as he knew "...input
elements are not necessarily styleable."

Although I am trying to find an official webpage that says that.

[kchayka]

Daniel Kaplan wrote:

"Klaus Krtschil" <kl****@gmx.d e> wrote in message
news:44******** ****@individual .net...

input.my_button :active
{
border: 2px inset #7777CC;
}
Same results...

This won't have any effect in IE because it has very limited support for
pseudo classes. It only supports :hover and :active on <a> elements.
Another person wrote that as far as he knew "...input
elements are not necessarily styleable."

Although I am trying to find an official webpage that says that.

It's not likely you'll find anything "official" about it. Styling form
elements is a touchy subject. It's often argued that form elements
belong to the O/S, not the browser, and shouldn't be stylable at all.
Hence some browsers support very limited styling, if any.

So don't bother getting all worked up if your style rules aren't
applied. You have no control over what browser makers implement, or not.
Just make sure that the form is usable with or without styling, then
move on to something more important.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.