Related
I have a range slider styled in Chrome.. I'm having major issues trying to get it to look the same in IE11 and firefox.. I've tried following some guides on how to make it compatible using the ms- and moz- for the webkit tags but it's still not formatting the same. I understand it may be a little different but its just nowhere near the same result. here's the code so far.. basically the range slider needs to be formatted same as the button above it.... any help much appreciated.
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label_1 {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after, .switch-label_1:before, .switch-label_1:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before, .switch-label_1:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after, .switch-label_1:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #86b692;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-input:checked ~ .switch-label_1 {
background: #a9d2d5;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label_1:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label_1:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-label_1, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.range {
display: block;
vertical-align: top;
width: 300px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.range-frame{
position: relative;
display: block;
height: inherit;
font-size: 10px;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: lightgray;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
-webkit-appearance: none;
margin-top: -1px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: lightgray;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: lightgray;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: lightgray;
border: 0px solid #000101;
border-radius: 35px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: transparent;
border: 0px solid #000101;
border-radius: 35px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: lightgray;
}
input[type=range]:focus::-ms-fill-upper {
background:lightgray;
}
.output-value{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
color: #aaaaaa;
pointer-events: none;
}
<html>
<head>
<title>Roland</title>
<link rel="stylesheet" href="range.css" />
<link rel="stylesheet" href="switch.css">
</head>
<body>
<form>
<label class="switch">
<input class="switch-input" type="checkbox" Filter="PL" Column="1">
<span class="switch-label" data-on="PL" data-off="PL"></span>
<span class="switch-handle"></span>
</label>
<label class="range">
<span class="range-frame">
<span for fader class="output-value" id="rangevalue">0 Nm</span>
<input class="range-input" id="fader" type="range" min="0" max="150" step="1" value="0" onchange="outputUpdate(value)">
</span>
</label>
</form>
<script>
function outputUpdate(vol) {
document.getElementById('rangevalue').innerHTML=vol + ' Nm';
}
</script>
</body>
</html>
here's what it should look like on all browsers -
thanks
C
The input type range is quite customizable. Unfortunately, each browser has its own way and thus we have to write longer codes than expected. Than also you will not get the exact similar results. The result will look little bit different from other browsers.
You can refer an example below which I try to customize to make it looks like your range slider. I tested it with various browsers and it looks almost similar in most of the browsers.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: lightgray;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
-webkit-appearance: none;
margin-top: -1px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: lightgray;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: lightgray;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: lightgray;
border: 0px solid #000101;
border-radius: 35px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: lightgray;
border: 0px solid #000101;
border-radius: 35px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: lightgray;
}
input[type=range]:focus::-ms-fill-upper {
background:lightgray;
}
body {
padding: 30px;
}
</style>
</head>
<body>
<input type="range">
</body>
</html>
Output in various browsers:
Reference:
(1) Codepen example
(2) Styling Cross-Browser Compatible Range Inputs with CSS
Further, you can try to modify it based on your own requirement or use it as a reference for making the changes in your own code.
I have a button with a style, and I want to change it to a new style without removing the existing style. So this is my currently button I have: http://jsfiddle.net/XaXg2/1/
HTML: <a id="login-button" class="s3d blue">Search</a>
CSS: #login-button { float: left; height: 28px; line-height: 28px; width: 100px; font-size: 15px; font-weight: 700; color: #FFF; border-radius: 4px; background: #AC3; text-align: center; cursor: pointer; }
I want to apply this new style without removing "login-button" style.
HTML: New Search
CSS:
a.s3d {
clear: both;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 4px 5px rgba(0,0,0,.3);
-moz-box-shadow:0 4px 5px rgba(0,0,0,.3);
box-shadow:0 4px 5px rgba(0,0,0,.3);
display: inline-block !important;
font: 700 13px/36px 'Arial', Helvetica, Clean, sans-serif;
height: 26px;
margin: 0 0 10px;
padding: 0 10px 11px;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255,255,255,.35);
width: 125px; }
a.blue {
background: #65acc8;
background: -webkit-gradient(linear, 0 0, 0 0, from(#65acc8), to(#4586ae));
background: -moz-linear-gradient(#65acc8, #4586ae);
background: linear-gradient(#65acc8, #4586ae);
border-top: 1px solid #a1cdde;
color: rgba(25,45,55,.9); }
a.blue:active {
background: #4586ae;
background: -webkit-gradient(linear, 0 0, 0 0, from(#4586ae), to(#65acc8));
background: -moz-linear-gradient(#4586ae, #65acc8);
background: linear-gradient(#4586ae, #65acc8); }
Use CSS specificity to override your original CSS. Add #login-button to your selectors:
jsFiddle example
#login-button {
float: left;
height: 28px;
line-height: 28px;
width: 100px;
font-size: 15px;
font-weight: 700;
color: #FFF;
border-radius: 4px;
background: #AC3;
text-align: center;
cursor: pointer;
}
a#login-button.s3d {
clear: both;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 4px 5px rgba(0, 0, 0, .3);
-moz-box-shadow:0 4px 5px rgba(0, 0, 0, .3);
box-shadow:0 4px 5px rgba(0, 0, 0, .3);
display: inline-block !important;
font: 700 13px/36px'Arial', Helvetica, Clean, sans-serif;
height: 26px;
margin: 0 0 10px;
padding: 0 10px 11px;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
width: 125px;
}
a#login-button.blue {
background: #65acc8;
background: -webkit-gradient(linear, 0 0, 0 0, from(#65acc8), to(#4586ae));
background: -moz-linear-gradient(#65acc8, #4586ae);
background: linear-gradient(#65acc8, #4586ae);
border-top: 1px solid #a1cdde;
color: rgba(25, 45, 55, .9);
}
a#login-button.blue:active {
background: #4586ae;
background: -webkit-gradient(linear, 0 0, 0 0, from(#4586ae), to(#65acc8));
background: -moz-linear-gradient(#4586ae, #65acc8);
background: linear-gradient(#4586ae, #65acc8);
}
Here is drop down box I got to work for me.
But it goes outof boundry on left end. Actually menu items should fit exactly below the text box.
Check Fiddle
I tried changing width of all element but could not set it. Can some one tell me which class exactly controls width of menu item which appear when dropdown box is popped?
css:
.container {
width:90%;
margin:10% auto;
}
.dropdown-menu{
width:85%;
margin:0 auto;
}
.twitter-typeahead .tt-query, .twitter-typeahead .tt-hint {
margin-bottom: 0;
width: 360px; !important;
}
.twitter-typeahead .tt-hint {
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius:4px;
}
.twitter-typeahead .hint-small {
height: 30px;
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
line-height: 1.5;
}
.twitter-typeahead .hint-large {
height: 45px;
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
line-height: 1.33;
}
.tt-dropdown-menu {
min-width: 260px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
On your class .dropdown-menu add this:
.dropdown-menu{
width:360px;
left:auto;
margin:0 auto;
}
The Fiddle demo
It's because 360px is the size of your input .twitter-typeahead .tt-query, .twitter-typeahead .tt-hint.
And the left:auto to keep the original distance no matter the absolute position.
So I made a form and added styling with CSS, it looks fine on windows but when I go to the form with my Mac it looks diffrent, everything is smaller and has changed color.
Why is OS X changing my CSS?
And is there a way to fix this problem?
Image of problem: http://i.tinyuploads.com/zq3rtp.png
This problem happens in every browser on my Mac
HTML Code:
<p>Name:<span class="Req-ourForm">*</span></p> <input type="text" required="required" name="name">
<br /><br />
<p>Email:<span class="Req-ourForm">*</span></p> <input type="text" required="required" name="email">
<br /><br />
<p>Website:<span class="Req-ourForm">*</span></p> <input type="text" required="required" name="website">
<br /><br />
<p>Priority:<span class="Req-ourForm">*</span></p>
<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
<label />
<select class="pri" name="priority" size="1" required="required">
<option value="Low">Low</option>
<option value="Normal">Normal</option>
<option value="High">High</option>
</select>
<!--[if !IE]> --></div> <!-- <![endif]-->
<br />
CSS Code:
input, textarea {
padding: 9px;
border: solid 1px #C9C9C9;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #e2e2e2 url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input.sub {
padding: 9px;
border: solid 1px #C9C9C9;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 300px;
background: #e2e2e2 url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input.captcha {
padding: 9px;
border: solid 1px #C9C9C9;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 45px;
text-align: center;
background: #e2e2e2 url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
textarea {
margin-top: 4px;
width: 380px;
max-width: 380px;
max-height: 150px;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #b3b3b3;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
#include box-shadow(0 0 5px rgba(81, 203, 238, 1));
border: 1px solid rgba(81, 203, 238, 1);
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #C9C9C9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/*CSS FOR DROP DOWN*/
label {
position: relative;
display: inline-block;
}
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 160px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: #fff;
}
select.pri {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 85px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: #fff;
}
select.aop {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 60px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: #fff;
}
select.stu {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 65px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: #fff;
}
Second issue is that the buttons are for some reason white instead of blue,
IMG: http://i.tinyuploads.com/pW0E24.png
HTML code of buttons:
<button id="continue-link" class="button button rect" type="submit">
<span>
<span class="effect"></span>
<span class="label">
SEND
</span>
</span>
</button>
<button id="continue-link" class="button button rect" type="reset">
<span>
<span class="effect"></span>
<span class="label">
CLEAR ALL
</span>
</span>
</button>
CSS of buttons:
/*BUTTON DESIGN*/
.button {
background-color: transparent;
border: 0 none;
border-collapse: separate;
cursor: pointer;
display: inline-block;
font: 11px/1.5 "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
overflow: visible;
position: relative;
}
.button > span {
background: url("common/src/store/base/patterns/buttons/css/bg/button_colors.png") repeat-x scroll 0 0 / 8px 22px #224272;
border: 1px solid #224272;
border-radius: 11px 11px 11px 11px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
color: white;
display: inline-block;
font: 12px/1 "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif;
letter-spacing: 0;
opacity: 1;
padding: 4px 25px;
position: relative;
text-align: center;
transition: opacity 800ms ease 0s;
white-space: nowrap;
word-spacing: 0;
}
.button:-moz-focusring {
outline: 0px dotted;
}
.ns .button, .button.rect {
background: linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0 transparent;
border: 1px solid #1992D9;
border-radius: 4px 4px 4px 4px; /*BUTTON ROUNDNESS*/
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.ns .button:hover, .ns .button:focus, .button.rect:hover, .button.rect:focus {
background: linear-gradient(#2F90D5, #0351B7) repeat scroll 0 0 transparent;
}
.ns .button:active, .ns .button.active, .button.rect:active, .button.rect.active {
box-shadow: 0 1px 0 #FFFFFF, 0 0 9px rgba(0, 0, 0, 0.5) inset;
}
.ns .button > span, .button.rect > span {
background: none repeat scroll 0 center transparent;
border: 0 none;
border-radius: 4px 4px 4px 4px;
box-shadow: none;
color: #FFFFFF;
font-size: 13px;
line-height: 15px;
padding: 4px 20px; /*BUTTON SIZE*/
}
The reason your button is not blue is because you are not declaring a webkit gradient. I had a look at your stylesheet. Add the correct prefix for various browsers as below -
.ns .button, .button.rect {
background: linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: -moz-linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: -webkit-linear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
background: -o-llinear-gradient(#37AAEA, #117ED2) repeat scroll 0 0;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
border: 1px solid #1992D9;
border-radius: 4px 4px 4px 4px; /*BUTTON ROUNDNESS*/
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
-webkit-appearance: none;
}
This ensures your gradient will work on all browsers that support it.
I would classify myself as a beginner and discover answers through trial and error. However I can't solve this. I would like an image to be behind the h2 text on my homepage. I have tried placing it everywhere within here and nothing makes it show up.
Here is my site: http://bitsybride.com
Here is what I want: http://bitsybride.com/Image8.png
Here is the relevant css:
.smallpost {
overflow:hidden;
width:730px;
padding-bottom:0;}
ul.smallpost li {
width:290px;
height:130px;
margin:0 40px 60px 0;
padding:0px 0px 0px 0px;
position:relative;
float:left;
background: url(images/pink ribbon.png);}
ul.smallpost h2 {
font-size: 12pt;
line-height: 0pt;
margin: 0 0 0px 0;
padding:5px 0px 100px 15px;
letter-spacing: -1px;}
ul.smallpost li img {
margin:-20px 0 15px -20px;
width:280px;
height:150px;
overflow:hidden;
padding: 4px;
margin: 1px 1px 4px 1px;
overflow: hidden;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /*-moz-border-radius: 5px;-khtml- border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-o-linear-gradient(#2F2727, #1a82f7);
background:
-moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent
;
background: -webkit-gradient(linear, left top, left bottom,
from(#fff),
color-stop(0.5, #fff),
to(#EFEFEF)
);
filter: progid: DXImageTransform.Microsoft.Gradient(StartColorStr='#ffffffff', EndColorStr='#EFEFEFEF');
-ms-filter: \"progid: DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#EFEFEFEF)";
-o-linear-gradient(top, #dcdcdc, #c6c6c6);
border: 1px solid #FFFFFF;
z-index: 5;}
Help!
If you want your h2's to have a background image, try this in your ul.smallpost h2
background-image: url('/wp-content/uploads/2012/05/bitsy2.png');
or wherever your image is.
use display:inline-block in your h2 tag
ul.smallpost li {
width:290px;
height:130px;
margin:0 40px 60px 0;
padding:0px 0px 0px 0px;
position:relative;
float:left;
}
ul.smallpost h2 {
font-size: 12pt;
line-height: 0pt;
margin: 0 0 0px 0;
padding:5px 0px 100px 15px;
letter-spacing: -1px;
background: url(images/pink ribbon.png);
display:inline-block;
}