473,326 Members | 2,134 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

CSS and Submit Button problem (across browsers)

Sorry, I posted this in ...authoring.html 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_button" type="submit" value=" Search ">

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

Feb 6 '06 #1
4 2172
Daniel Kaplan schrieb:
Sorry, I posted this in ...authoring.html 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.
Feb 6 '06 #2
Daniel Kaplan schrieb:
Sorry, I posted this in ...authoring.html 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_button" type="submit" value=" Search ">

* here is the class definition in my CSS Style Sheet:
input.my_button
{
#background:#DDDDDD;
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: 890bdbdeaa3ddab07bac87a3115d553a
Feb 6 '06 #3
"Klaus Krtschil" <kl****@gmx.de> 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...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.
Feb 6 '06 #4
Daniel Kaplan wrote:
"Klaus Krtschil" <kl****@gmx.de> 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.
Feb 6 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Nicolas Keller | last post by:
Hi! I'm used to have Mozilla for testing my PHP sites when I'm coding. The site's nearly finished, now I've made a test with the Internet Exlporer... guess what... failed. The problem: I'm...
4
by: Sarah | last post by:
Hi all. I have a form, and several text and image links on it that should submit the form with different actions. I prepared a simple page with just the code that's not working. PROBLEM:...
3
by: John Dunlop | last post by:
(Note crosspost and follow-ups to ciwah.) Nicolas Keller wrote in thread "Differences in form handling btw Mozilla and IE?": > The problem: I'm using a form that submit's (POST) its data via...
0
by: Daniel Kaplan | last post by:
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...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.