I have a problem with a project, i don't know way, chrome and firefox are not display the same height with my buttons. I'd been looking around and I found that firefox has an issue with buttons, so i add the code below, but still doesn't work. What could it be?
.button-type::-moz-focus-inner { border: 0; padding: 0; margin:0; }
.button-type {
background: #a9a9a9;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 3px rgba(255,255,255,0.2), inset 0 2px rgba(255,255,255,0.2), inset 0 28px 22px rgba(255,255,255,0.2), inset 0 -10px 28px rgba(0,0,0,0.2);
box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 3px rgba(255,255,255,0.2), inset 0 2px rgba(255,255,255,0.2), inset 0 28px 22px rgba(255,255,255,0.2), inset 0 -10px 28px rgba(0,0,0,0.2);
font: Arial, Helvetica, sans-serif;
line-height: 1;
padding: 8px 15px;
width: auto;
height: auto;
border: none;
text-align: center;
font-size: 13px;
color: #fff;
cursor: pointer;
display: block;
text-decoration: none;
text-shadow: -1px -1px #333;
}
.button-type.black {
background: #000;
color: #fff;
}
.button-type.gray {
background: #a9a9a9;
}
.button-type.light-gray {
background: #d3d3d3;
color: #222;
}
Solve it the solution (and error) was:
display:block
replace it with:
display:inline
We are using posts and gets, which out-of-the box appear as links (gets) and buttons (posts). In an effort to provide a pleasant and consistent look to the UI, we have button themed all UI click interactions to look the same using css:
.minimal
{
background: #e3e3e3;
border: 1px solid #bbb;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
box-shadow: inset 0 0 1px 1px #f6f6f6;
color: #333;
font: bold 12px "helvetica neue" , helvetica, arial, sans-serif;
padding: 5px 20px 5px 20px;
text-align: center;
text-shadow: 0 1px 0 #fff;
text-decoration: none;
}
.minimal:hover
{
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer;
}
.minimal:active
{
background: #d0d0d0;
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
-moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;
color: #000;
}
...and used this way:
#Html.ActionLink("Edit", "Edit", new { id = Model.ID }, new {#class = "minimal"})
<input type="submit" class = "minimal" value="submit" />
The problem is with the padding statement in .minimal, it seems that depending on the length of text contained in the ActionLink you will get a longer or shorter button. I would use the 'width' tag but in only has effect on the posts... not on the ActionLinks. Has anyone successfully addressed this issue?
width only works on block elements. Try to add this:
a.minimal {
display: inline-block;
padding: 5px 0;
width: 198px; /* subtract border */
}
and add width to .minimal:
width: 200px;
(or style for links in general and treat the submit button in a special way)
For better cross-browser compatibility you might also need to do some trickery according to this (old) article:
a.minimal {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
padding: 5px 0;
width: 198px; /* subtract border */
}
You need to try what works for your target browsers. I tried the first (simpler) solution and it works on all current browsers and IE7 + IE8.
The new Google Docs UI features cool gray scrollbars.
These appear to be regular scrollbars styled with selectors like ::-webkit-scrollbar-thumb. Which is nice and accessible.
However, I can't get arrow buttons to appear (circled on the screenshot). Inspector shows no corresponding DOM elements or any special CSS. So the question is, how these custom scrollbars are made, including the arrow buttons?
Please check out this fiddle.
Edit:
So it seems that just not all css rules appear in the Inspector.
In particular, you'd need ::-webkit-scrollbar-button:vertical:decrement and ::-webkit-scrollbar-button:vertical:increment, and their horizontal equivalents.
Please see new fiddle (updated 27 Apr. 2012).
Hope this can help you:
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #ebebeb;
overflow: visible;
}
::-webkit-scrollbar-corner {
display: none;
background: #f5f5f5;
}
::-webkit-scrollbar-button {
display: none;
height:0;
width: 0;
}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
display: block;
}
::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
::-webkit-scrollbar-track {
-moz-background-clip: border;
-webkit-background-clip: border;
background-clip: padding-box;
background-color: #f5f5f5;
}
::-webkit-scrollbar-track:vertical, ::-webkit-scrollbar-track:horizontal {
border-left-width: 0;
border-right-width: 0;
}
::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal,::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal {
border-style: solid;
border-color: transparent;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
background-clip: padding-box;
background-color: rgba(0,0,0,.2);
min-height: 28px;
padding-top: 100px;
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);
background-color: rgba(0,0,0,.4);
}
::-webkit-scrollbar-thumb:active {
-webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,.35);
background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
border-width: 0;
border-left-width: 0;
border-right-width: 0;
}
It looks like the css tags for the handles don't show up in Chrome's dev tools. You have to examine the source of the sample to see what is really going on.
http://www.webkit.org/blog/363/styling-scrollbars/
Try this:
<style rel="stylesheet" type="text/css">
::-webkit-scrollbar{height:16px;overflow:visible;width:16px}
::-webkit-scrollbar-button{height:0;width:0}
::-webkit-scrollbar-track{background-clip:padding-box;border:solid transparent;border-width:0 0 0 7px}
::-webkit-scrollbar-track:horizontal{border-width:7px 0 0}
::-webkit-scrollbar-track:hover{background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 0 rgba(0,0,0,.1)}
::-webkit-scrollbar-track:active{background-color:rgba(0,0,0,.05);box-shadow:inset 1px -1px 0 rgba(0,0,0,.14),inset -1px 1px 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-track:horizontal:hover{box-shadow:inset -1px 1px 0 rgba(0,0,0,.14),inset 1px -1px 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-track:vertical:hover{box-shadow:inset 1px 1px 0 rgba(0,0,0,.14),inset -1px -1px 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);background-clip:padding-box;border:solid transparent;border-width:0 0 0 7px;min-height:28px;padding:100px 0 0;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset -1px -1px 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4);box-shadow:inset 1px 1px 1px rgba(0,0,0,.25)}
::-webkit-scrollbar-thumb:horizontal{border-width:7px 0 0;padding:0 0 0 100px;box-shadow:inset -1px 1px 0 rgba(0,0,0,.1),inset 1px -1px 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.5);box-shadow:inset 1px 1px 3px rgba(0,0,0,.35)}
::-webkit-scrollbar-corner{background:transparent}
body::-webkit-scrollbar-track-piece{background-clip:padding-box;background-color:#f5f5f5;border:solid #fff;border-width:0 0 0 3px;box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07)}
body::-webkit-scrollbar-track-piece:horizontal{border-width:3px 0 0;box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07)}
body::-webkit-scrollbar-thumb{background-clip:padding-box;border-width:1px 1px 1px 5px}
body::-webkit-scrollbar-thumb:horizontal{border-width:5px 1px 1px}
body::-webkit-scrollbar-corner{background-clip:padding-box;background-color:#f5f5f5;border:solid #fff;border-width:3px 0 0 3px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.14)}.whiteBox,.greyBox{padding:16px 0;margin-bottom:16px}.greyBox{background:#f1f1f1}.kd-ruledBox{width:100%}.kd-greyRuled{border-top:1px solid #e5e5e5}.kd-whiteRuled{border-top:1px solid #ebebeb}#openid-icon{background:no-repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") -36px -70px;width:16px;height:16px}#lj-icon{background:no-repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") -45px -165px;width:16px;height:16px}#wp-icon{background:no-repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") -16px -101px;width:16px;height:16px}#typekey-icon{background:no-repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") 0 -101px;width:16px;height:16px}#aol-icon{background:no-repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") -45px -133px;width:16px;height:16px}.icon_delete{background:no-repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") -32px -101px;width:13px;height:13px}.errormsg{text-align:left;background:url("data:image/gif;base64,R0lGODlhEAAPAMQfAP+tHgAAAC4tLR4eHkRDQ//0kIB/f7q3rf/LU/rvsF9eXvr49f/mdv/WZ0I+MtrU0v/Xid++U8+hN7+/j//9w5OQjt/di7+wW/+7OIB/S6+WQhAPDc/PqMC+vSAbC+7n5SH5BAEAAB8ALAAAAAAQAA8AAAWB4CeORCA8Y5oegRIYauw4lBOgsVgFU8EFhJxo4LBkLK5DbjfJBC6JzSBHpDgvjB0stTsULs9GQrDBDQmUbyCCQLAUo12nwGA42hiIqzOk1TUeEhiDCxsOH3J0DBobggAAEAYBFQMCCwl1EA1tCHkLAwMBAwakpaakGyYBq6ytrQIhADs=") no-repeat left top;padding-left:24px;margin-top:5px;color:#c00}#openIdUrlPreviewFade{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==) 0 0 repeat-y;position:absolute;right:.5em;width:32px;height:100%;-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/openid-preview-fade.png',sizingMethod='scale',height='100px')";_background-image:none;z-index:1000}#comments-block dt{margin-top:10px;padding-top:0;padding-bottom:.25em;white-space:nowrap;cursor:pointer}#comments-block dt.collapsed{border-bottom:1px solid #ccc}#comments-block dd{margin:0 0 .75em;line-height:140%;border-bottom:1px solid #ccc}#comments-block dd.collapsed{display:none}.profile-image-container{float:right;margin:.4em 0 .2em .8em;position:relative;z-index:2}img.profile{padding:.2em;border:1px solid #bbb}.status-msg-outer{position:relative;margin:33px auto 0 auto;z-index:100;text-align:center}.status-msg{visibility:hidden;padding:6px 16px;background:#f9edbe;border:1px solid #f0c36d;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;opacity:0;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);-moz-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2);-webkit-transform:scale(.2);-moz-transform:scale(.2);-o-transform:scale(.2);transform:scale(.2);-webkit-transition:opacity 1s,-webkit-transform 0 linear 1s,left 0 linear 1s;-moz-transition:opacity .13s;-o-transition:opacity .13s;transition:opacity .13s}.status-msg.status-msg-yellow-on-white{visibility:visible;opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scal(1);transform:scale(1);-webkit-transition:all .13s,left 0 linear 0;-moz-transition:all .218s;-o-transition:all .218s}.status-msg span{margin:0;line-height:29px;font-size:11px}.status-msg a{color:#333;text-decoration:underline}.kd-butterbar a:hover{color:#202020}.kd-butterbar.mini{margin-bottom:-5px}.kd-modaldialog.visible{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}.kd-modaldialog{-webkit-box-shadow:0 4px 16px rgba(0,0,0,.2);-moz-box-shadow:0 4px 16px rgba(0,0,0,.2);-ms-box-shadow:0 4px 16px rgba(0,0,0,.2);box-shadow:0 4px 16px rgba(0,0,0,.2);background:#fff;left:50%;border:1px solid #ccc;padding:30px 42px;position:fixed;right:auto;width:512px;height:auto;overflow:hidden;z-index:100;top:72px;margin-left:-256px;opacity:0;-webkit-transform:scale(1.05);-moz-transform:scale(1.05);transform:scale(1.05);-webkit-transition:all .218s;-moz-transition:all .218s;transition:all .218s}.kd-modaldialog.medium{padding:28px 32px;width:384px}.kd-modaldialog.small{padding:16px 20px;width:256px}.kd-modaldialog h1{margin-bottom:1em}.kd-errormessage{color:#dd4b39;padding:9px 0}textarea.kd-formerror{border:1px solid #dd4b39}</style>
</style>
A quick, easy, cross browser solution would be to use a jQuery plugin like jScrollPane
I need to create a one pixel shadow on three sides of an element using box shadow. I'm using the following code, except it's creating a two pixel border but I only need one.
-moz-box-shadow: 0 1px 1px #c00
-webkit-box-shadow: 0 0 1px 0 #c00
box-shadow: 0 0 1px 0 #c00
Try 3 shadows, no blur. http://jsfiddle.net/leaverou/8tgAp/1/
body {
width: 300px;
height: 200px;
margin: 20px auto;
-moz-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
-webkit-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
}
Using the normal border declaration is the way to go, but if—for whatever reason—you're unable to use border, then you can hide one side of the shadow with the :before or :after pseudo-selector.
Example:
body {background-color: #000; color: #fff}
.module {
height: 100px;
width: 100px;
background-color: #000;
-moz-box-shadow: 0 0 2px #f00;
-webkit-box-shadow: 0 0 2px #f00;
box-shadow: 0 0 2px #f00;
}
.module:before {
content: '';
border-top: solid #000 1px;
display: block;
position: relative;
top: -1px;
}
You can see it in action here: http://jsfiddle.net/3nspR/