All browsers except Chrome do display this style:
.my-checkbox {
width: 20px;
height:20px;
color:#fff;
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
border: 0px inset ThreeDFace ! important;
margin: 5px;
padding: 5px;
}
Example: http://jsfiddle.net/sJxst/
is this approach possible in Chrome?
There is a jquery plugin for this.. i don't know any other method yet for Chrome
http://archive.plugins.jquery.com/project/ui-checkbox
Also check this:
input.checkbox { display: none }
input.checkbox + label > span.checkbox-span { display: inline-block; color: #FFF; border: 1px solid #000; width: 30px; line-height: 30px; font-size: 24px; text-align: center }
input.checkbox:checked + label > span.checkbox-span { color: #000 }
http://jsfiddle.net/KfjuS/4/
Related
Currently there are no options in the theme to align TABS centered. I tried to play with the CSS in the stylesheet (style.css), but with no luck.
how can I make the tabs center aligned?
/* tab */
.tab-set {
margin-bottom: 50px;
}
.tab-set ul.tabs-titles {
padding: 0;
height: 32px;
margin: 0;
clear: right;
}
.tab-set .tabs-titles li {
padding: 15px 35px;
color: #fff;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
border-right: 1px solid #f6f6f6;
float: left;
list-style-type: none;
cursor: pointer;
}
.tab-set .tabs-titles li:last-child {
border-right: none;
}
.tab-set .tabs-titles li.current {
padding: 15px 35px;
position: relative;
top: 1px;
color: #575a5c;
background: #f6f6f6;
}
.tab-set .tab-content {
padding: 20px 20px 10px;
background-color: #f6f6f6;
clear: both;
}
.tab-content p {
padding: 0;
}
.tab-set.white .tabs-titles li {
border-right: 1px solid #fff;
}
.tab-set.white .tabs-titles li.current {
background: #fff;
}
.tab-set.white .tab-content {
background-color: #fff;
}
It's a bit hard to guess the issue since there's no html to make sure the structure is correct. For sake of cleaner code, I'd do this and update the following:
.tab-set ul.tabs-titles {
padding: 0;
margin: 0;
width: 100%;
display: inline-block;
text-align: center;
}
.tab-set .tabs-titles li {
padding: 15px 35px;
color: #fff;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
border-right: 1px solid #f6f6f6;
display: inline-block;
}
.tab-set .tabs-titles li.current {
color: #575a5c;
background: #f6f6f6;
}
Try not ever set a fixed height unless needed because that's how items can look all messy. Have the padding/line-height dictate the height. I also removed some duplicates. For example, applying the same padding to .current was just doing the same thing. Hope this helps.
EDIT:
Here's my codepen to see it in action: https://codepen.io/thecenteno/pen/LYYgMpv
I'm trying to style each button and a.btn to look the same across all browsers. Using the following styles the 2 elements don't line up in Chrome and Firefox.
#wrap {
border: 2px solid red;
}
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
height: 27.2px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
}
<div id="wrap">
Link
<button>Link</button>
</div>
I've tried changing the vertical-align to bottom, but while that does move the elements into a more aligned state, the text on the button itself looks mis-aligned still (demo below).
#wrap {
border: 2px solid red;
}
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
height: 27.2px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
vertical-align: bottom;
}
<div id="wrap">
Link
<button>Link</button>
</div>
How can I make both elements display the same way in both Chrome and Firefox?
Erase the height setting from the rule and fine-tune the height only with the paddingparameters:
#wrap {
border: 2px solid red;
}
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
}
<div id="wrap">
Link
<button>Link</button>
</div>
Chrome and Firefox both use different rendering engines to display html (Chrome uses Blink and Firefox uses Gecko). Different browsers use different rendering engines so I don't think it will look exactly the same across all browsers.
I was using this code to create a ruler on my site:
CSS:
.ruler, .ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}
/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}
div {
margin-top: 2em;
}
HTML:
<ul class="ruler"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
It was working OK with bootstrap2:
http://jsfiddle.net/Uvt5U/4/
Now I'm migrating to bootstrap3 and the ruler is broken:
http://jsfiddle.net/Uvt5U/
How can I get it working?
Kind Regards.
This is because in Bootstrap 3 box-sizing style is set to border-box, while in Bootstrap 2 it's not.
My Firebug points me that this rule is setting this style:
*, *:before, *:after {
-moz-box-sizing: border-box;
}
bootstrap.min.css line 9
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}