MozillaZine

Firefox v41.0.2 CSS Bug?

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

Post Posted October 24th, 2015, 6:34 pm

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

DanRaisch
Moderator

User avatar
 
Posts: 117378
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted October 25th, 2015, 4:14 am

Moving to Web Development.

Pim

User avatar
 
Posts: 2200
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Post Posted October 25th, 2015, 5:25 am

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: 132
Joined: November 21st, 2003, 4:56 am
Location: Edinburg, Texas

Post Posted October 25th, 2015, 6:54 am

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: 132
Joined: November 21st, 2003, 4:56 am
Location: Edinburg, Texas

Post Posted October 25th, 2015, 7:20 am

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: 132
Joined: November 21st, 2003, 4:56 am
Location: Edinburg, Texas

Post Posted October 25th, 2015, 9:47 am

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?

jscher2000

User avatar
 
Posts: 10077
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted October 25th, 2015, 2:23 pm

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: 132
Joined: November 21st, 2003, 4:56 am
Location: Edinburg, Texas

Post Posted October 25th, 2015, 3:56 pm

That makes sense, I guess.


Thanks for the input and help,

Charles

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest