Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS Style for input type="button"?

Reply
Thread Tools

CSS Style for input type="button"?

 
 
Robert Mark Bram
Guest
Posts: n/a
 
      02-16-2004
Howdy All!

How can I define a style sheet for a button class..

.button
{
width: 120px;
} # end button style

<input name="reset" type="button" class="button" value="Reset">


But is there a way I can specify the style to simply affect all input tags
of type button?

Thanks for any advice!

Rob



 
Reply With Quote
 
 
 
 
Kris
Guest
Posts: n/a
 
      02-16-2004
In article <4030b032$0$15134$(E-Mail Removed)> ,
"Robert Mark Bram" <(E-Mail Removed)> wrote:

> How can I define a style sheet for a button class..
>
> .button
> {
> width: 120px;
> } # end button style
>
> <input name="reset" type="button" class="button" value="Reset">


Comments is CSS go:
/* end button style */

>
> But is there a way I can specify the style to simply affect all input tags
> of type button?


Set a class="button" on all that apply, or use
input[type="submit"], input[type="reset"] { ... }
, but that is quite incompatible with shitty browsers.

Read more:
<http://www.cs.tut.fi/~jkorpela/forms/present.html>

--
Kris
<(E-Mail Removed)> (nl)
<http://www.cinnamon.nl/>
 
Reply With Quote
 
 
 
 
Paul Furman
Guest
Posts: n/a
 
      02-16-2004
Kris wrote:
>
>
>>But is there a way I can specify the style to simply affect all input tags
>>of type button?

>
>
> Set a class="button" on all that apply, or use
> input[type="submit"], input[type="reset"] { ... }
> , but that is quite incompatible with shitty browsers.
>
> Read more:
> <http://www.cs.tut.fi/~jkorpela/forms/present.html>




This worked for me:
button {
border-size: 0px;
border-style: none;
background: inherit;
font: inherit;
color: blue;
cursor: hand;
cursor: pointer;
padding: 0px;
}
makes a button look like a link
(need to add underline and or hover to finish it)

 
Reply With Quote
 
Luigi Donatello Asero
Guest
Posts: n/a
 
      02-16-2004

"Paul Furman" <(E-Mail Removed)> skrev i meddelandet
news:(E-Mail Removed)...
> Kris wrote:
> >
> >
> >>But is there a way I can specify the style to simply affect all input

tags
> >>of type button?

> >
> >
> > Set a class="button" on all that apply, or use
> > input[type="submit"], input[type="reset"] { ... }
> > , but that is quite incompatible with shitty browsers.
> >
> > Read more:
> > <http://www.cs.tut.fi/~jkorpela/forms/present.html>

>
>
>
> This worked for me:
> button {
> border-size: 0px;
> border-style: none;
> background: inherit;
> font: inherit;
> color: blue;
> cursor: hand;
> cursor: pointer;
> padding: 0px;
> }
> makes a button look like a link
> (need to add underline and or hover to finish it)


Did you define "cursor" twice?


--
Luigi ( un italiano che vive in Svezia)
http://www.italymap.dk
http://www.scaiecat-spa-gigi.com/sv/...tartiklar.html





 
Reply With Quote
 
Paul Furman
Guest
Posts: n/a
 
      02-17-2004
Luigi Donatello Asero wrote:

> "Paul Furman" <(E-Mail Removed)> skrev i meddelandet


>> button {
>> cursor: hand;
>> cursor: pointer;
>> }
>>makes a button look like a link

>
> Did you define "cursor" twice?


I guess it's a hand that points???

 
Reply With Quote
 
mscir
Guest
Posts: n/a
 
      02-17-2004
Luigi Donatello Asero wrote:
> "Paul Furman" <(E-Mail Removed)>
>
>>Kris wrote:
>>>
>>>>But is there a way I can specify the style to simply affect all input tags
>>>>of type button?
>>>
>>>Set a class="button" on all that apply, or use
>>>input[type="submit"], input[type="reset"] { ... }
>>>, but that is quite incompatible with shitty browsers.
>>>
>>><http://www.cs.tut.fi/~jkorpela/forms/present.html>

>>
>>This worked for me:
>> button {
>> border-size: 0px;
>> border-style: none;
>> background: inherit;
>> font: inherit;
>> color: blue;
>> cursor: hand;
>> cursor: pointer;
>> padding: 0px;
>> }
>>makes a button look like a link
>>(need to add underline and or hover to finish it)

>
> Did you define "cursor" twice?


http://devedge.netscape.com/viewsource/2002/cursor/

A good number of developers have asked when Mozilla and Netscape 6+ plan
to implement support for the cursor property. They're often surprised
to discover that both browsers already do. However, what should come as
no surprise is that the support is based on the approved W3C
specification for CSS2, as opposed to adding portions at will.

The basic problem is this: Internet Explorer 5.x for Windows recognizes
the value hand, which appears nowhere in section 18.1 of CSS2-- nor
anywhere else in the specification, for that matter. The value which
most closely corresponds to the behavior of hand is pointer, which the
specification defines as: "The cursor is a pointer that indicates a
link." Note that doesn't say anything about a hand appearing, but going
by browser conventions to date, the practical effect is the same.

Unfortunately, IE5.x/Win doesn't recognize the value pointer as meaning
anything at all. IE6/Win and IE5.x/Mac do both recognize pointer as well
as hand, fortunately. Meanwhile, Mozilla and Netscape 6+ follow the CSS2
specification and handle pointer, but ignore the proprietary value hand.

So if Mozilla/Netscape ignores hand and IE5.x/Win ignores pointer,
what's an author to do? Ask for both in the proper manner, and you shall
be rewarded.

a {cursor: pointer; cursor: hand;}

Do not reverse those two values! If you write your styles as shown
above, then NS6+ will see the first value and ignore the second, so you
get pointer. In IE5.x/Win, it sees both and uses the second, so you get
hand. If you reverse the values, then Netscape 6+ will be okay, but
IE5.x/Win will see both and try to use the second. That won't get you
the little hand-pointer icon in IE5.x/Win.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
IE - can get actual CSS style, not computed style? Nik Coughlin Javascript 2 01-23-2008 01:26 AM
Changing style of the numbers in a CSS <ol> without changing the style of the <li> Aaron Beall HTML 2 09-14-2007 08:07 PM
DataGrid header style inconsistent with sortable column style cedoucette@alum.rpi.edu ASP .Net 0 10-14-2005 12:13 AM
All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer Rob Nicholson ASP .Net 3 05-28-2005 03:11 PM
Need help with Style conversion from Style object to Style key/value collection. Ken Varn ASP .Net Building Controls 0 04-26-2004 07:06 PM



Advertisments