CSS Submit and Reset button problem, Submit doesn't depress while Reset does using same CSS Options

[CharlesEF]

Hi All,

I'm not that good with CSS and I can't figure out why when the Submit (Log In) button is clicked it doesn't seem to depress. While the Reset button, using the same CSS rule, seems to depress some. I found that if I remove bold from the font rule then the Submit button seems to depress but the Reset button now doesn't depress.
I have made a sample page to show this problem. I have removed everything except what is needed to show the problem. The page can be found here. It is a self contained page. If anyone would be kind enough to look at the page and tell me where I messed up I will be grateful.

Thanks for any help,

Charles

[Christian J]

Which browser(s) are you having trouble with? I could see the problem in Firefox/Windows. To find the cause, you can just remove some CSS at the time until the problem goes away. Seems this CSS is causing trouble in Firefox:

CODE

input
{
  width: 70px;
  padding-left: 3px;
  border: 1px solid #E09494;
}

As for why it happens, it seems that Firefox' default depress effect is created by changing the button's background color, and maybe the position of the button text. But your border styling seems to prevent Firefox from changing background-color (which seems like a browser bug to me), while your width and padding seems to prevent the text position change.

[pandy]

Then why aren't both buttons affected? To me it looks more like the text moves a little.

In Iron (approximately Chrome) none of the buttons looks depressed.

[CharlesEF]

Yes, I do use Firefox for my main browser. I tested the page in Chromodo and see that neither button will depress al all (I assume Chrome would do the same). I also tested in IE11 and find that both buttons work as they should. I will report this to Mozilla to see if it's a bug or something I've done.

Thank you for your help,

Charles

[pandy]

Since you've styled the buttons it's probably something you've done. Do both buttons use exactly the same styling?

[CharlesEF]

Yes, I do think it is something I've done with the CSS but I'll be darned it I see why. I found that I can mimic the depress by removing the border: 1px solid #E09494; rule from the CSS. It still does not look like a regular button depress but at least it does something in all 3 of my browsers.

Before I report this to Mozilla I changed the page to include 2 forms, with different id's, in order to show the difference. I duplicated the CSS rules and deleted the submit and reset rules from the CSS section. Now I've run into another problem. The Log In button is now a default looking button but the Reset button has kept the old CSS rules. Why?

[pandy]

Makes sense since borders change on click. You override that with your own borders.

Why not style a depressed look on hover (or use JS to do it onclick)? I think :hover works well enough. I've made some fancy buttons that weren't real buttons, but those files are on an old HD. So this is just to show you what I mean, I haven't bothered to try to make it perfect or pretty. I used a span so I wouldn't need to bother with the default styling of button, but it should work with a real button too.

CODE

.button     { display: block; text-align: center;
              width: 3.5em; height: 1.2em;
              padding: 3px;
              background: #D4D0C8; color: #000;
              border: 2px solid; border-color: #808080 #404040 #404040 #808080 }
span:hover  { border-color: #404040; border-width: 2px 1px 1px 2px;
              margin-top: 1px; margin-left: 1px }

HTML

<span class="button">Click me</span>

[CharlesEF]

I'll try it out and report back.


Thanks,

Charles

[Christian J]

Yes, I do think it is something I've done with the CSS but I'll be darned it I see why.

Probably unrelated, but do you really want to use these selectors:

CODE

#cefiform input[type="submit"]:hover, input[type="reset"]:hover

--shouldn't it be like this:

CODE

#cefiform input[type="submit"]:hover, #cefiform input[type="reset"]:hover

? The same thing appears in several of the other rules too.

[Christian J]

Why not style a depressed look on hover (or use JS to do it onclick)?

With CSS maybe :focus can be used? Seems to work in my desktop browsers, at least as long as the user doesn't focus the button without pressing it.

With JS I'd use onmousedown, with onclick the style change would take place when it's already too late.

But personally I think the browser's default styling is the best choice for form elements, since the user will be more familiar with it.

[CharlesEF]

Probably unrelated, but do you really want to use these selectors:

CODE

#cefiform input[type="submit"]:hover, input[type="reset"]:hover

--shouldn't it be like this:

CODE

#cefiform input[type="submit"]:hover, #cefiform input[type="reset"]:hover

? The same thing appears in several of the other rules too.

As I said before I'm not that good with CSS, mainly because I've only done very simple stuff. When I wrote these rules I was going off a sample page I found on the internet. That sample used thw format I used in my CSS. I did wonder about using the id selector a 2nd time, like your 2nd example, and I searched for as much information as I could. I never really found a single answer. I found both formats used about equally and it seemed to work fine, at the time, so I went with my version. I will try it out with the 2nd style and see if that helps.

In the future, should I forget about my style and use yours?

[Christian J]

In the future, should I forget about my style and use yours?

It depends on what you want to do. This

CODE

#cefiform input[type="submit"]:hover, input[type="reset"]:hover

only selects hovered submit buttons inside the parent #cefiform, while all hovered reset buttons on the whole page are selected. In contrast, this

CODE

#cefiform input[type="submit"]:hover, #cefiform input[type="reset"]:hover

only selects submit and reset buttons inside #cefiform.

[pandy]

Yeah, :focus could be better. I always forget about it because it didn't use to be well supported.

[Frederiek]

Charles, maybe the CSS selector series starting at http://www.456bereastreet.com/archive/2005...lectors_part_1/ will make things clear. Bookmark it for backup reference.

[CharlesEF]

Sorry for the delay, I got called for an out of town service call and I just got back. Anyway thanks for all the input, I think I got it figured out now.

@Christian J: Your format fixed the problem I had with the Reset button on the 2nd form of my sample page. 99% of the time I will want to use your format and I'll remember it from now on.

@pandy: I have not tried your button rules yet but I found I can't use :focus on buttons because the background doesn't change back after the click. I will have to stick with :hover.

@Frederiek: Great article about CSS, thanks for the link. It is now bookmarked.

Thanks to everyone for their time and ideas. After I clear the cog-webs from my brain I will play with this some more. If I have any more problems I will post back.

[CharlesEF]

I found the problem. I used 'Log In' for the button text (value attribute). When I changed it to 'Submit' the button text started to depress just like the Reset button text.

I don't think it should work this way but what do I know.

[pandy]

Crazy!

It still must be connected to your CSS somehow because it doesn't happen without the styling. Can't figure out what it is.

[CharlesEF]

Crazy!

It still must be connected to your CSS somehow because it doesn't happen without the styling. Can't figure out what it is.

I haven't given up yet. The reason I found this was because I have a contact form with it's own CSS file. I transfered the rules for the Submit and Reset buttons into it (because I'm changing colors). I found that both buttons worked as they should. The only difference I could see was that the Submit button had the value attribute as 'Submit'.
As a test I changed the button text on my sample log in form to be 'Submit' and it did work as it should. When I figure this out I will post back with the answer.

[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!!! I have uploaded the page to the same link, if anyone wants to check it out.

[Christian J]

I had a rule: 'padding-left: 3px;' which when removed allowed the Submit button text to depress.

Told you so.