> -----Original Message-----
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
> boun...@lists.css-discuss.org] On Behalf Of John Deighan
> Sent: Tuesday, November 09, 2010 1:51 PM
> To: css-d@lists.css-discuss.org
> Subject: [css-d] Simple (I hope) styling question
>
> I think there's something here that I don't understand - though I have
> done a lot of reading about how CSS works. Fortunately, I have a very
> simple example below. I have tried this in both Firefox
> 3.6.12 and IE8 and the behavior is the same.
>
> In the HTML file below, I'm expecting the label on the submit button to
> be red, 11px text. My reasoning is that even though the 2nd rule is
> more specific, and therefore would take precedence over the 1st rule,
> since the 2nd rule doesn't set the color, font-size and font-family
> attributes, the submit button (an <input> element) should inherit
> those settings from the 1st rule.
>
> If I move the color, font-size and font-family attributes from the 1st
> rule to the 2nd rule, the label is, in fact, red and 11px.
>
> (While composing this e-mail, I tried simply removing the 2nd rule
> below entirely. When I did, the label of the submit button was still not
> red nor 11px, so I conclude that the more specific 2nd rule isn't
> responsible for "hiding" the attributes in the 1st rule)
>
> <html>
> <head>
> <style type="text/css">
> div.buttonmenu table {
> background: #BFBFBF;
>
> color: red;
> font-size: 11px;
> font-family: Arial, Helvetica, sans-serif;
> }
>
> div.buttonmenu table input {
> margin: 0px;
> padding: 0px 2px 0px 2px;
> width: 100%;
> }
> </style>
> </head>
>
The first rule affects text in the table, but only if there is no default
styling for a subelement. For example, making the color red on the table
doesn't change that links in the table are blue, because a rule that targets
<table> does not target <a>.
The default styling for a submit button (in firefox 4.0b) is:
button, input[type="reset"], input[type="button"], input[type="submit"] {
-moz-appearance: button;
-moz-binding: none;
-moz-box-sizing: border-box;
-moz-user-select: none;
background-color: buttonface;
border: 2px outset buttonface;
color: buttontext;
cursor: default;
font: -moz-button;
line-height: normal !important;
padding: 0 6px;
text-align: center;
text-shadow: none;
white-space: pre;
}
It appears that "buttontext" is a synonym for "black" and that "-moz-button" is
"13.3333px MS Shell Dlg".
If you want the submit button to take the properties, you can use:
div.buttonmenu table input {
margin: 0px;
padding: 0px 2px;
width: 100%;
font: inherit;
color: inherit;
}
---Tim
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
