No replies
vind
vind's picture
Offline
newbie
Last seen: 7 years 29 weeks ago
Timezone: GMT+1
Joined: 2013-01-12
Posts: 1
Points: 2

I was directed here from the WordPress.org support forums with a CSS issue regarding the styling of buttons rendered by the theme Twenty Twelve. I'm using a child theme, however, so I have overridden most of the CSS in question to fit my website.

While I have managed to resolve the original problem that lead me here, another one has occurred, where my buttons double the left border in a pressed state.

While the code from my customized stylesheet follows below, I would assume it would be helpful to inspect my website with a tool like Firebug or similar (wouldn't that be a standard around here anyway?).

/* Styling for website buttons - default */
.menu-toggle, input[type="submit"], input[type="button"], input[type="reset"], article.post-password-required input
 
[type="submit"], li.bypostauthor cite span {
    -moz-border-bottom-colors: #444444;
    -moz-border-left-colors: #444444;
    -moz-border-right-colors: #444444;
    -moz-border-top-colors: #444444;
    background-color: #000000;
    background-image: -moz-linear-gradient(center top , #393939, #222222);
    background-repeat: repeat-x;
    border-bottom-color: #383838;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color: #383838;
    border-left-style: solid;
    border-left-width: 1px
    border-right-color: #383838;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #383838;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: solid;
    border-top-width: 1px;
    box-shadow: 0 0 0 rgba(64, 64, 64, 0);
    color: #777777;
    font-family: fantasy;
    font-variant: inherit;
    font-weight: bold;
    padding-bottom: 0.428571rem;
    padding-left: 0.714286rem;
    padding-right: 0.714286rem;
    padding-top: 0.428571rem;
}
 
/* Styling for website buttons - :hover */
.menu-toggle:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, 
 
article.post-password-required input[type="submit"]:hover {
    background-color: #000000;
    background-image: -moz-linear-gradient(center top , #333333, #333333);
    background-repeat: repeat-x;
    color: #999999;
    text-shadow: 0 0 0.3em #777777;
}
 
/* Styling for website buttons - :active */
.menu-toggle:active, .menu-toggle.toggled-on, button:active, input[type="submit"]:active, input[type="button"]:active, 
 
input[type="reset"]:active {
    -moz-border-bottom-colors: #444444;
    -moz-border-left-colors: #444444;
    -moz-border-right-colors: #444444;
    -moz-border-top-colors: #444444;
    background-color: #000000;
    background-image: -moz-linear-gradient(center top , #222222, #393939);
    background-repeat: repeat-x;
    border-bottom-color: #383838;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color: #383838;
    border-left-style: solid;
    border-left-width: 0px
    border-right-color: #383838;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #383838;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: solid;
    border-top-width: 1px;
    box-shadow: 0 0 0 rgba(64, 64, 64, 0);
    font-family: fantasy;
    font-variant: inherit;
    font-weight: bold;
    color: #888888;
    text-shadow: 0 0 0.3em #666666;
    padding-bottom: 0.428571rem;
    padding-left: 0.714286rem;
    padding-right: 0.714286rem;
    padding-top: 0.428571rem;
}

This is basically my effort from trial and error. I'm not much experienced with coding in general, so please bear with my lack of knowledge on the subject.

The issue in question can be demonstrated here.