Highlighting image button

[russiandevil]

hi,

Does anyone have an idea on how I'd go about highlighting (with a
border, or something equally effective) a input button of type 'image'
(i.e. <input type=image alt=Login src=http://<etc, path to image file>
Login)

For most of the other element, applying a style such as
"background-color: red; border-color: red; border-width: thick" seems
to be sufficient, however for image buttons (especially those that have
"border=0" as a part of their HTML definition) this seems to be rather
ineffective.

Any suggestions would be welcome,

regards,
Greg

[Jukka K. Korpela]

Scripsit ru**********@gm ail.com:

Does anyone have an idea on how I'd go about highlighting (with a
border, or something equally effective) a input button of type 'image'

Perhaps, but why do you ask this in an HTML group?

For most of the other element, applying a style such as
"background-color: red; border-color: red; border-width: thick" seems
to be sufficient, however for image buttons (especially those that
have "border=0" as a part of their HTML definition) this seems to be
rather ineffective.

Rrright. Your mileage surely varies, since browsers differ in their CSS
support, but this _isn't_ an HTML issue.

What _is_ an HTML issue is that you would get better results by using a
normal submit button, <input type="submit" ...>, _especially_ since_ it
looks similar to the normal submit buttons on web pages. Besides, some
modern browsers change the visual appearance of a normal submit button on
mouseover _by default_.

Using an image submit button is mostly just a way to create problems that
wouldn't exist if you used a normal submit button.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Roy A.]

ru**********@gm ail.com skrev:

hi,

Does anyone have an idea on how I'd go about highlighting (with a
border, or something equally effective) a input button of type 'image'
(i.e. <input type=image alt=Login src=http://<etc, path to image file>
Login)

For most of the other element, applying a style such as
"background-color: red; border-color: red; border-width: thick" seems
to be sufficient, however for image buttons (especially those that have
"border=0" as a part of their HTML definition) this seems to be rather
ineffective.

In an eigth year old recommandation from W3C i found this:

'outline' Value: [ <'outline-color'|| <'outline-style'||
<'outline-width'] | inherit

http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines

That would meen you could use somthing like:

..highlight { outline:red solid thick" }

But if that don't apply, try borders. If the image buttons have
"border=0" as a part of their HTML definition you could override that
with a more spesefic rule like:

form .highlight { border: ... }

http://www.w3.org/TR/REC-CSS2/cascad...ascading-order
http://www.w3.org/TR/REC-CSS2/cascade.html#specificity