[css-d] Simple (I hope) styling question

[John Deighan]

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

body class=buttonmenu
center
div class=buttonmenu
table
tr
th
form 
action=/help/h-index.htm
input value=Help 
type=submit
/form
/th
/tr
/table
/div
/center
/body
__
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/

Re: [css-d] Simple (I hope) styling question

[Climis, Tim]

 -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.px 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/