This is probably a very basic question for someone who has been working with styles for years, so I apologize in advance.
Here are three styles for 3 different buttons:
Code:
INPUT.buttons {
font-family: Tahoma, Verdana, Arial;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
border-style: solid;
border-color: #666666;
border-width: 1px;
background-color: #748196;
cell-spacing: 4px;
width: 70px;
}
INPUT.smallbuttons {
font-family: Tahoma, Verdana, Arial;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
border-style: solid;
border-color: #666666;
border-width: 1px;
background-color: #748196;
cell-spacing: 4px;
width: 30px;
}
INPUT.longbuttons {
font-family: Tahoma, Verdana, Arial;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
border-style: solid;
border-color: #666666;
border-width: 1px;
background-color: #748196;
cell-spacing: 4px;
width: 120px;
}
The only difference between the 3 styles is the width. It seems like bad practice to have to declare all the other elements that the 3 styles have in common, 3 times.
I'm wondering what is the best way to handle this. In theory I'd like my code be something like this:
Code:
INPUT.buttons {
font-family: Tahoma, Verdana, Arial;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
border-style: solid;
border-color: #666666;
border-width: 1px;
background-color: #748196;
cell-spacing: 4px;
}
INPUT.smallbuttons { width: 30px; }
INPUT.longbuttons { width: 120px; }
and have the latter two styles inherit the "buttons" class style.
I do this with other styles for example:
Code:
INPUT {
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
color: #333333;
border-top: #666666 1px outset;
border-left: #666666 1px outset;
border-bottom: #666666 1px inset;
border-right: #666666 1px inset;
background-color: #FFFFFF;
width: 85px;
}
INPUT.prefix { width: 22px; }
INPUT.suffix { width: 27px; }
but that makes sense because I'm declaring a style for ALL input tags and then the classes inherit the INPUT's elements, overriding the width.
Also, I don't want to override the style in the HTML like this:
<input class="buttons" style="width: 10px"....
nor do I want to use JavaScript to dynamically set the width.
How do I do this?
Thanks,
Dev Shed Forums Sponsor:
November 24th, 2003, 08:31 PM
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
