Firefox v41.0.2 CSS Bug?

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post Reply
CharlesEF
Posts: 148
Joined: November 21st, 2003, 4:56 am
Location: Edinburg, Texas

Firefox v41.0.2 CSS Bug?

Post by CharlesEF »

Hi All,

I have used CSS to style my Submit (Log In) and Reset buttons. The problem is that both buttons act differently. I have setup a sample a page http://www.cef-inc.com/test/login.php to show this problem. This is a self contained page which includes the CSS, just view source to see it.

The problem is that when you click on Reset it acts like a button, you see the text depress etc. But, the Submit button does not show the text depressing, the text stays put in the same place. I found that if I remove the font: rule from the CSS then the Submit button acts like it should but the Reset button no longer acts the same. The Reset button text does not depress

Did I do something wrong in the CSS or is this a real bug?


Thanks for any help,

Charles
User avatar
DanRaisch
Moderator
Posts: 127188
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Re: Firefox v41.0.2 CSS Bug?

Post by DanRaisch »

Moving to Web Development.
User avatar
Pim
Posts: 2215
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Re: Firefox v41.0.2 CSS Bug?

Post by Pim »

I don't see any differences between the buttons, neither with the regular SeaMonkey (v2.38) not with the nightly v2.41a1.
The background changes colour on hover, the border changes colour on click, the text doesn't depress.

Now I was going to suggest you clear your cache, because you might have an older stylesheet cached, but all the CSS is in a style element, so that can't be it. Hm.
Groetjes, Pim
CharlesEF
Posts: 148
Joined: November 21st, 2003, 4:56 am
Location: Edinburg, Texas

Re: Firefox v41.0.2 CSS Bug?

Post by CharlesEF »

I did clear my cache before I posted. On my current version of Firefox I see the Reset button text depress when clicked. The Submit button text does not depress. In Chrome neither button text will depress. Funny thing is in IE11 I see both buttons text depress when clicked. As I said before, if I remove the font rule from the CSS in input[type="submit"], input[type="reset"] then I see the Submit button text depress and the Reset button text does not depress anymore. Removing that 1 rule makes the button text depress action flip.
CharlesEF
Posts: 148
Joined: November 21st, 2003, 4:56 am
Location: Edinburg, Texas

Re: Firefox v41.0.2 CSS Bug?

Post by CharlesEF »

I just found the problem. Believe it or not but my submit button text is 'Log In' and the text does not depress. But, if I change the button text to 'Submit' then the button text does depress.

Should the value attribute make such a difference?
CharlesEF
Posts: 148
Joined: November 21st, 2003, 4:56 am
Location: Edinburg, Texas

Re: Firefox v41.0.2 CSS Bug?

Post by CharlesEF »

Okay, I figured it out. I had a rule: 'padding-left: 3px;' which when removed allowed the Submit button text to depress. I changed it to 'margin-left: 3px;' and everything works as it should. Yeah!!!

So the question is should it behave that way? Or is this some kind of bug?
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: Firefox v41.0.2 CSS Bug?

Post by jscher2000 »

Possibly your padding rule overrode the internal forms.css file rules, which seem to have a subtle 1px shift in padding, but using -moz properties so I'm not sure of the precedence:

Standard state:

Code: Select all

{
  -moz-appearance: button;
  /* The sum of border and padding on block-start and block-end
     must be the same here, for text inputs, and for <select>.  For
     buttons, make sure to include the -moz-focus-inner border/padding. */
  padding-block-start: 0px;
  -moz-padding-end: 6px;
  padding-block-end: 0px;
  -moz-padding-start: 6px;
  border: 2px outset ButtonFace;
  background-color: ButtonFace;
  cursor: default;
  box-sizing: border-box;
  -moz-user-select: none;
  -moz-binding: none;
}


Active+hover state:

Code: Select all

{
  padding-block-start: 0px;
  -moz-padding-end: 5px;
  padding-block-end: 0px;
  -moz-padding-start: 7px;
  border-style: inset;
  background-color: ButtonFace;
}
CharlesEF
Posts: 148
Joined: November 21st, 2003, 4:56 am
Location: Edinburg, Texas

Re: Firefox v41.0.2 CSS Bug?

Post by CharlesEF »

That makes sense, I guess.


Thanks for the input and help,

Charles
Post Reply