158855 - Hard coded dark border around Go button makes it unskinnable

Status: VERIFIED INVALID

(Core Graveyard :: Skinability, defect)

Description

[Bamm Gabriana]

In more recent builds, a dark border appears around the Go button no matter how
I style it. I find this undesirable, since, as a skin author, I prefer to have
no borders around this button unless hovered. In particular, it doesn't look
good in IE Skin.

Steps to Reproduce:
1) Have a copy of Mozilla 1.0 and Mozilla 1.1b.
2) Install IE Skin from: http://mozillako.hypermart.net/ieskin/
3) Make sure Go and Search buttons are both visible.

Results:
1) Go button has a dark border in Mozilla 1.1b but NOT in Mozilla 1.0.
2) Search button has no border in either build.

Expected:
1) Neither Go nor Search buttons should have a border in either version of Mozilla.

I consider this a bug in Mozilla rather than in my theme for the following reasons:

1) In IE skin, Go and Search are styled exactly the same way, and therefore I
expect them to look exactly the same.

2) None of the following removes the border from Go
   a) border: 1px solid transparent
   b) border: 1px solid -moz-Dialog
   c) border: none !important;

This is wrong. A border color should not be hard coded into any Mozilla element.
It deprives theme authors the ability to style them according to the particular
needs of his/her theme.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Does the IE skin style the "default" button in any particular way?  Because the
"Go" button is "default" (and this is correct, since hitting enter in the urlbar
will effectively trigger the "Go" button).

Comment 2

[Bamm Gabriana]

I initially thought that to be the case. However even adding the following gave
the same results.

#go-button[default="true"] {
  border: 1px solid transparent !important;
}

As an experiment, I tried adding the following lines to userChrome.css. I
expected the border to turn bright red.

#go-button,
#go-button[default="true"] {
  border: 1px solid red !important;
}

The actual results was still a dark border. Ironically, the DOM Inspector showed
the following results in the Computed Style window:

border-bottom-color   rgb(255, 0, 0)
border-left-color     rgb(255, 0, 0)
border-right-color    rgb(255, 0, 0)
border-top-color      rgb(255, 0, 0)

which means Mozilla *does* recognize the experimental red border, but still
shows it as black.

Please try to confirm my experiment.

Comment 3

[Boris Zbarsky [:bzbarsky]]

If you look at button.css in the themes, it's using -moz-border-colors, not
border; -moz-border-colors overrides border if it's set.

Comment 4

[Bamm Gabriana]

Exactly. What I have is the following:
/communicator/button.css

.button-toolbar, 
.button-toolbar[disabled="true"]:hover,
.button-toolbar[disabled="true"]:hover:active {
  border: 1px solid;
  -moz-border-top-colors: transparent;
  -moz-border-right-colors: transparent;
  -moz-border-bottom-colors: transparent;
  -moz-border-left-colors: transparent;
}

.button-toolbar:hover {
  -moz-border-top-colors: ThreeDHighlight;
  -moz-border-right-colors: ThreeDShadow;
  -moz-border-bottom-colors: ThreeDShadow;
  -moz-border-left-colors: ThreeDHighlight;
}
  
.button-toolbar:hover:active {
  -moz-border-top-colors: ThreeDShadow;
  -moz-border-right-colors: ThreeDHighlight;
  -moz-border-bottom-colors: ThreeDHighlight;
  -moz-border-left-colors: ThreeDShadow;
}

And it WORKS as expected in Mozilla 1.0. Why then does it not work as I want it
in the nightlies?

And if my setting is indeed overridden, it should show up in the DOM Inspector.
But as I noted the DOM Inspector shows MY settings.

Also, specific overrides general. So #go-button overrides .button-toolbar.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Hmm. OK.  DOM inspector does not show -moz-border-colors, but that should not
matter here, since it worked in 1.0.... (and yes, I just checked and there seem
to be no rules that are !important and would set -moz-border-colors on that
button).  Though you should still check Inspector for that...

Comment 6

[Bamm Gabriana]

A year and a half and this still isn't fixed. I'm updating IE Skin for Mozilla 
1.5 and this bug doesn't help any. It also makes it impossible to complete an 
IE Skin XP.

Will be updating my page soon.

Comment 7

[[e-mail]]

The Go button is supposed to have a default border, as it's the enter action.

If you don't want it, then override the default="true" styles in your theme.

Comment 8

[Bamm Gabriana]

Exactly the point. I am not complaining about the border itself. I am 
complaining about the inability to override it in the skins.

Comment 9

[[e-mail]]

Any border on that button is caused by rules *in your theme* and may be removed
by further rules *in your theme* - my theme doesn't have a border around the Go
button, because the rules I have for .button-toolbar prevent the rules for
default="true" from taking effect.

Comment 10

[Bamm Gabriana]

I have always set .button-toolbar with border: 0 and it used to work. In Mozilla 
1.0 there was no border around it, as expected. But in subsequent versions, it 
appeared even if I didn't change any settings for .button-toolbar. This is also 
true for the search button so I don't think this is about being a default 
button.

Please check out my latest version at
http://mozillako.hypermart.net/ieskin/

and use the DOM Inspector to check what I have. Under "Computed Rules" on the 
right side, you will see that #go-button and #search-button both have
border-top-width, border-right-width, border-bottom-width, border-left-width all 
equal to zero. But looking at the toolbar there is actually a border even if the 
DOM Inspector says there shouldn't be any. This is really driving me crazy.

I will check out your skin to see how you did it. Thanks. I'm keeping this 
Resolved Invalid until I find out more.

Comment 11

[[e-mail]]

(Wild guess) Does your theme use -moz-appearance?

Comment 12

[Bamm Gabriana]

Just checked, I don't have -moz-appearance in either #go-button or 
#search-button. Am I supposed to have one?

Comment 13

[[e-mail]]

No, perhaps I'll get a chance to look at your theme some time...

Comment 14

[[e-mail]]

I'm sorry, I wasn't able to correctly download your theme, after running zip -FF
I was able to make it appear as a theme option but having selected the theme
Mozilla now crashes :-( but not before displaying a bold go button :-/

Comment 15

[Bamm Gabriana]

Neil, your hunch is probably correct. Setting -moz-appearance to toolbarbutton 
did not make the border disappear, but it did reverse the -moz-
appearance:button set in global. I'm verifying this bug invalid, coz I think I 
can work from here and create a fix for my skin in the next few days.