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
Firefox v41.0.2 CSS Bug?
-
- Posts: 148
- Joined: November 21st, 2003, 4:56 am
- Location: Edinburg, Texas
- DanRaisch
- Moderator
- Posts: 127188
- Joined: September 23rd, 2004, 8:57 pm
- Location: Somewhere on the right coast
Re: Firefox v41.0.2 CSS Bug?
Moving to Web Development.
- Pim
- Posts: 2215
- Joined: May 17th, 2004, 2:04 pm
- Location: Netherlands
Re: Firefox v41.0.2 CSS Bug?
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.
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
-
- Posts: 148
- Joined: November 21st, 2003, 4:56 am
- Location: Edinburg, Texas
Re: Firefox v41.0.2 CSS Bug?
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.
-
- Posts: 148
- Joined: November 21st, 2003, 4:56 am
- Location: Edinburg, Texas
Re: Firefox v41.0.2 CSS Bug?
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?
Should the value attribute make such a difference?
-
- Posts: 148
- Joined: November 21st, 2003, 4:56 am
- Location: Edinburg, Texas
Re: Firefox v41.0.2 CSS Bug?
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?
So the question is should it behave that way? Or is this some kind of bug?
- jscher2000
- Posts: 11742
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: Firefox v41.0.2 CSS Bug?
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:
Active+hover state:
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;
}
-
- Posts: 148
- Joined: November 21st, 2003, 4:56 am
- Location: Edinburg, Texas
Re: Firefox v41.0.2 CSS Bug?
That makes sense, I guess.
Thanks for the input and help,
Charles
Thanks for the input and help,
Charles