I am adding buttons to my project and am having difficulty figuring out why the background around the svg is showing both the background of the button and the page's background in a square around the svg.
Any idea what how to fix my scss/css? The code sandbox is here.
* {
background: lightcoral;
}
button {
background-color: lightblue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 25px;
outline: none;
margin: 2rem;
transition: 0.3s ease-in-out;
cursor: pointer;
&:hover {
background: blue;
}
}
//Home button behavior is here
.home-button {
margin: 1rem;
border: none;
outline: none;
}
.home-pic {
border: none;
width: 2.5rem;
}
Here is how you fix it:
* {
background: lightcoral;
}
button {
background-color: lightblue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 25px;
outline: none;
margin: 2rem;
transition: 0.3s ease-in-out;
cursor: pointer;
&:hover {
background: blue;
// apply hover effect to the home button
.home-pic{
background: blue;
}
}
}
//Home button behavior is here
.home-button {
// do you really need these styles?
// margin: 1rem;
// border: none;
// outline: none;
}
.home-pic {
border: none;
// I added these styles
width: 1.1rem;
transition: 0.3s ease-in-out;
background-color: lightblue;
}
My CSS style for the range slider doesn't work on Edge. How can I fix the Problem?
I searched on the web for a solution. And added some codes but still not working.
.slider {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #33A2D9;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: #33A2D9;
cursor: pointer;
}
/*I added this to fix for edge but it doesn't work */
input[type=range]::-ms-thumb{
width: 15px !important;
height: 15px !important;
border-radius: 50% !important;
background: #33A2D9 !important;
cursor: pointer !important;;
}
input[type=range]::-ms-fill-upper {
border-radius: 5px !important;
background: #d3d3d3 !important;
}
input[type=range]::-ms-fill-lower {
border-radius: 5px !important;
background: #d3d3d3 !important;
}
What it should look like (for example on Firefox):
What it look like on edge:
Your "mistake" (if we can call it that) was giving the input a background. You want to give it background-color of transparent and give the -track the desired shade.
Also, as a minor side note and general rule, avoid using background instead of background-color. It is shorter, but it sets a bunch of other background- properties, which you normally don't care about but are a source of common bugs.
Since it tends to be repetitive, I wrote it in SCSS:
$input-height: 16px;
$track-height: 6px;
$thumb-bg: #33A2D9;
$track-bg: #d3d3d3;
#mixin slider-thumb {
width: $input-height;
height: $input-height;
border-radius: $input-height/2;
background-color: $thumb-bg;
appearance: none;
}
#mixin slider-track {
height: $track-height;
border-radius: $track-height/2;
background-color: $track-bg;
appearance: none;
}
.slider[type=range] {
-webkit-transition: .2s;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: $input-height;
background-color: transparent;
outline: none;
opacity: 0.7;
transition: opacity .2s;
cursor: pointer;
&:hover, &:focus, &:active {
opacity: 1;
}
&::-webkit-slider- {
&runnable-track {
-webkit-appearance: none;
#include slider-track;
}
&thumb {
-webkit-appearance: none;
#include slider-thumb;
margin-top: -($input-height - $track-height)/2;
}
}
&::-moz-range- {
&track {
#include slider-track;
}
&thumb {
#include slider-thumb;
margin-top: 0;
}
}
&::-ms- {
&track {
#include slider-track;
}
&fill-upper {
#include slider-track;
}
&fill-lower {
#include slider-track;
}
&thumb {
#include slider-thumb;
margin-top: 0;
}
}
}
Resulting in the following CSS:
.slider[type=range] {
-webkit-appearance: none;
-webkit-transition: .2s;
width: 100%;
height: 16px;
border-radius: 3px;
background-color: transparent;
outline: none;
opacity: 0.7;
transition: opacity .2s;
cursor: pointer;
}
.slider[type=range]:hover, .slider[type=range]:focus, .slider[type=range]:active {
opacity: 1;
}
.slider[type=range]::-webkit-slider-runnable-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-webkit-slider-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
-webkit-appearance: none;
appearance: none;
margin-top: -5px;
}
.slider[type=range]::-moz-range-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
margin-top: 0;
}
.slider[type=range]::-ms-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-fill-upper {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-fill-lower {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
margin-top: 0;
}
<input type=range class=slider>
Playground here.
I'm trying to style range inputs on webkit. Everything works fine on Firefox but webkit display strange white dots around the track.
I read an article about this and took inspiration from it (link).
Now here is the demo. As you can see there are white dots I can't get rid off.
body {
padding: 30px;
background-color: black;
}
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*required for proper track sizing in FF*/
width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: black;
border: none;
border-radius: 3px;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
<input type="range">
It must be very simple but I'm still struggling with this.
Thank you
The reason why you have four dots is input tag has default background color. i.e. background-color: white; from user agent stylesheet.
Try following CSS
input[type=range] {
-webkit-appearance: none;
border: 0px;
width: 300px;
background-color: transparent;
}
At a certain width the wrapper should shrink and become centered like this: http://i.imgur.com/ny6Y4ur.png but for some reason it doesn't work for me: http://i.imgur.com/N3vPI5e.png What am I doing wrong ?
CSS:
div#header {
height: 140px !important;
width: 940px !important;
margin: 0 auto !important;
}
div#header div#header_logo {
position: absolute !important;
top: 30px;
width: 803px !important;
}
div#header div#header_logo h1 {
position: relative !important;
top: 35px !important;
height: 50px !important;
width: 269px !important;
background: url('../images/compudoc_logo.png') no-repeat !important;
float: left !important;
margin-top: 15px !important;
}
div#header div#header_logo h1 a {
display: block !important;
width: 269px !important;
height: 40px !important;
text-indent: -9999px !important;
}
div#header div#header_logo h2 a.nl {
height: 75px !important;
width: 334px !important;
text-indent: -5000px !important;
background: url('../images/compudoc_side_logo.png') no-repeat !important;
float: right !important;
margin-left: 200px !important;
}
div#header div#header_logo h2 a.nl:hover {
height: 75px !important;
width: 334px !important;
text-indent: -5000px !important;
background: url('../images/compudoc_side_logo_hover.png') no-repeat !important;
}
div#header div#header_logo h2 a.en {
height: 75px !important;
width: 334px !important;
text-indent: -5000px !important;
background: url('../images/compudoc_side_logo_en.png') no-repeat !important;
float: right !important;
margin-left: 200px !important;
}
div#header div#header_logo h2 a.en:hover {
height: 75px !important;
width: 334px !important;
text-indent: -5000px !important;
background: url('../images/compudoc_side_logo_hover_en.png') no-repeat !important;
}
div#header div#header_logo h2 a.fr {
height: 75px !important;
width: 334px !important;
text-indent: -5000px !important;
background: url('../images/compudoc_side_logo_fr.png') no-repeat !important;
float: right !important;
margin-left: 200px !important;
}
div#header div#header_logo h2 a.fr:hover {
height: 75px !important;
width: 334px !important;
text-indent: -5000px !important;
background: url('../images/compudoc_side_logo_hover_fr.png') no-repeat !important;
}
div#header_logo h2 a {
position: relative !important;
top: 30px !important;
right: 120px !important;
height: 75px !important;
width: 334px !important;
text-indent: -5000px !important;
background: url('../images/compudoc_side_logo.png') no-repeat !important;
float: right !important;
margin-left: 200px !important;
}
div#header div#header_logo h2 a:hover {
height: 75px !important;
width: 334px !important;
text-indent: -5000px !important;
background: url('../images/compudoc_side_logo_hover.png') no-repeat !important;
}
.hiding span {
display: none;
}
.search {
position: relative;
left: 710px;
bottom: 161px;
}
.search input {
width: auto !important;
background-color: #fff !important;
}
.search input:focus {
background-color: #f1f6ff !important;
}
.item {
border: 1px solid #cad3cb;
padding: 20px;
}
.item img {
height: 150px;
width: 200px;
}
div#languageChoice {
width: 70px !important;
float: right !important;
}
div#languageChoice img {
display: inline-block !important;
width: 15px !important;
height: 12px !important;
margin-right: 4px !important;
}
#logo {
margin-top: 22px !important;
}
#logo a img {
float: left !important;
}
#tagline {
color: #888 !important;
border-left: 1px solid #e9e9e9 !important;
margin: 0 0 0 20px !important;
padding: 5px 0 5px 20px !important;
float: left !important;
}
div#sitenav {
position: relative !important;
top: 40px !important;
right: 45px !important;
background: #303030 !important;
display: block;
width: 79.3em !important;
float: left !important;
max-height: 52px !important;
margin: 0 29px 15px 0;
}
.sitenav2 {
margin-top: 12px !important;
}
.sitenav2 ul li:nth-child(2) a {
margin-right: 40px;
}
.sitenav2 ul li:nth-child(3), .sitenav2 ul li:nth-child(4), .sitenav2 ul li:nth-child(5), .sitenav2 ul li:nth-child(6), .sitenav2 ul li:nth-child(7), .sitenav2 ul li:nth-child(8) {
background: url(../css/images/navigation-divider.png) no-repeat right 50%;
}
div#sitenav ul:nth-child(2) li:nth-child(1) {
padding-left: 40px !important;
}
div#sitenav ul,
div#sitenav li {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: inline !important;
}
div#sitenav ul li {
display: inline-block !important;
vertical-align: top !important;
position: relative !important;
}
div#sitenav ul li a {
display: inline-block !important;
color: #fff !important;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 500 !important;
padding: 17px 20px !important;
}
div#sitenav ul li a:hover {
background: #2db2ea !important;
color: #fff !important;
-webkit-transition: all 0.1s ease-in-out !important;
-moz-transition: all 0.1s ease-in-out !important;
-o-transition: all 0.1s ease-in-out !important;
transition: all 0.1s ease-in-out !important;
}
div#sitenav ul:nth-child(1) li:nth-child(1) a, div#sitenav ul:nth-child(1) li:nth-child(2) a, div#sitenav ul:nth-child(2) li:nth-child(1) a, div#sitenav ul:nth-child(2) li:nth-child(2) a, div#sitenav ul:nth-child(2) li:nth-child(3) a, div#sitenav ul:nth-child(2) li:nth-child(4) a, div#sitenav ul:nth-child(2) li:nth-child(5) a, div#sitenav ul:nth-child(2) li:nth-child(6) a {
background: url(../css/images/navigation-divider.png) no-repeat right 50%;
}
div#sitenav ul:nth-child(2) li:nth-child(1) a {
margin-left: 50px !important;
}
div#sitenav ul:first-child li:nth-child(2) a {
background: none;
}
div#sitenav ul:nth-child(3) li a {
background-color: #4ea09c;
}
.active {
background: #2db2ea !important;
}
.submenu-active {
color: #2db2ea !important;
}
/*here*/
#content_container {
position: relative !important;
/*width: 960px !important;*/
margin: 0 auto !important;
padding: 0 !important;
}
#pageContent {
float: left !important;
width: 780px;
}
#pageContent h2 {
font-weight: normal !important;
padding: 11px 0 0 0 !important;
}
#pageContent a {
color: #2db2ea;
}
#pageContent a:hover {
text-decoration: underline;
}
#pageContent p {
padding-left: 0 !important;
}
#pageContent ul {
list-style: disc inside !important;
}
.pageContentShop {
width: 780px !important;
}
.details a {
font-size: 1px !important;
}
.ui-dialog {
overflow: hidden;
margin-left: 446px !important;
}
.thumb small a {
color: #666666 !important;
text-decoration: none !important;
cursor: default !important;
}
#bolded-line {
background: #2db2ea !important;
}
p {
margin: 0 !important;
}
img.ui-datepicker-trigger {
display: none;
}
/*Table*/
.table, table.admin, table.factuur, table.lid_detail, table.klant {
font-size: 12px;
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: none;
margin-bottom: 15px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
}
.table th, table.admin th, table.factuur th, table.lid_detail th, table.klant th {
text-align: center;
border: 1px solid #dddddd;
border-right: none;
background-color: #fafafa;
padding: 10px 15px;
color: #404040;
vertical-align: top;
font-size: 14px;
font-weight: bold;
}
.table td:last-child, table.admin td:last-child, table.factuur td:last-child, table.lid_detail td:last-child, table.klant td:last-child {
border-right: 1px solid #ddd;
}
.table th:last-child, table.admin th:last-child, table.factuur th:last-child, table.lid_detail th:last-child, table.klant th:last-child {
border-right: 1px solid #ddd;
}
.table td, table.admin td, table.factuur td, table.lid_detail td, table.klant td {
text-align: center;
padding: 10px 15px;
border: #e0e0e0 1px solid;
border-top: none;
border-right: none;
}
.table tr:hover td, table.admin tr:hover td, table.factuur tr:hover td, table.lid_detail tr:hover td, table.klant tr:hover td {
background-color: #fafafa;
}
.tableFacturen th, .tableFacturen td {
padding: 0 !important;
text-align: center !important;
}
.tableMijn th, .tableMijn td {
padding: 2px !important;
text-align: center !important;
}
.no-padding-1 th, .no-padding-1 td {
text-align: center;
padding: 1px !important;
}
table.lid_detail tr:first-child td {
border-top: 1px solid #e0e0e0 !important;
}
table.lid_detail input[type="submit"] {
margin-right: 25px !important;
}
.borderTop tr:first-of-type td {
border-top: 1px solid #e0e0e0 !important;
}
/**/
img.report_problem {
margin: 0 auto;
}
#content_container #sec_nav_container, #sec_nav_container2,
#content_container .columns {
float: left !important;
display: inline !important;
margin-left: 10px;
margin-right: 10px;
}
#sec_nav_container {
position: absolute;
left: 805px;
margin-right: 0 !important;
}
#sec_nav_container2 {
width: 150px;
position: relative;
right: 17px;
padding-right: 11px;
margin-left: 0 !important;
}
#sec_nav_container {
width: 160px !important;
}
#sec_nav_container img:first-child {
width: auto;
height: auto;
}
#topVerkoop .tabel img {
width: 130px !important;
height: 90px !important;
}
.tabel_hoofding small {
float: left;
font-weight: normal !important;
font-size: 10px;
}
.no-border td {
border: none !important;
}
.no-border-2 {
border: none !important;
}
.add tbody input {
margin-bottom: 5px !important;
}
.tabel {
position: relative;
vertical-align: middle !important;
}
table.formPadding td {
padding-right: 12px !important;
}
/* Self Clearing Goodness */
#content_container:after {
content: "\0020" !important;
display: block !important;
height: 0 !important;
clear: both !important;
visibility: hidden !important;
}
#submenu li a {
color: #666;
display: block !important;
padding: 3px 0 !important;
padding-left: 12px !important;
background: url(../css/images/links-list-arrow-02.png) no-repeat left 47% !important;
}
.links-list li a:hover {
color: #fff !important;
}
#submenu li a:hover {
color: #2db2ea;
}
.links-list li:first-child a,
#submenu li:first-child a {
margin: -3px 0 0 0 !important;
}
div#comment_ticker h4 {
cursor: default;
font-size: 16px !important;
}
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
display: inline-block !important;
}
.notification {
font-family: "Open Sans", sans-serif;
font-size: 12px;
line-height: 18px;
margin-bottom: 15px;
position: relative;
padding: 14px 40px 14px 18px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
background-color: #ffe9e9;
color: #de5959 !important;
border: 1px solid #fbc4c4;
}
.notification:before {
content: "Error: ";
font-weight: bold;
}
.notification a {
color: #de5959 !important;
}
.notification a:link {
text-decoration: underline;
}
.ui-dialog {
top: 100px !important;
position: fixed !important;
}
/*code for the carousel */
#carousel_inner {
margin-left: auto;
margin-right: auto;
position: relative;
height: 150px;
width: 950px; /* important (this width = width of list item(including margin) * items shown */
overflow: hidden; /* important (hide the items outside the div) */
/* non-important styling bellow */
/*background: #ffffff;*/
}
#carousel_ul {
position: relative;
left: -150px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0;
padding: 0;
width: 9999px; /* important */
/* non-important styling bellow */
padding-bottom: 10px;
}
#carousel_ul li {
float: left; /*important for inline positioning of the list items*/
width: 180px; /*fixed width, important*/
/* just styling bellow*/
padding: 0;
text-align: left;
/*height:40px;*/
color: #fff;
font-style: italic;
font-size: 11px;
font-weight: normal !important;
/*background: #ffffff;*/
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
cursor: default;
}
#carousel_ul li center a img {
. margin-bottom : - 4 px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that */
/* styling */
cursor: hand;
border: 0px;
}
#left_scroll, #right_scroll {
float: left;
height: 100px;
width: 0;
background: #ffffff;
}
#left_scroll img, #right_scroll img {
border: 0; /* remove the default border of linked image */
/*styling*/
cursor: hand;
}
.form-margin {
margin-right: 3px !important;
}
#footer-bottom {
cursor: default;
height: 20px !important;
text-align: center;
}
#footer-bottom a:hover {
color: #2db2ea !important;
}
#footer-bottom-shop {
padding: 22px 0;
cursor: default;
height: 7px !important;
text-align: center;
}
#footer-bottom-shop a {
color: #fff;
}
.shop-footer-text {
position: relative;
bottom: 13px !important;
}
#footer-bottom-shop a:hover {
color: #2db2ea !important;
}
#scroll-top-top {
width: 35px;
position: relative;
left: 925px;
bottom: 40px;
}
#scroll-top-top a {
background-color: #2db2ea;
}
.scroll-top-top-shop {
bottom: 39px !important;
}
#save {
cursor: hand;
}
td.item:hover {
background: #fafafa;
}
.loginForm {
margin: 0 180px;
}
.login {
margin: 0;
}
input[type="submit"], #pageContent input[type="button"] {
color: #ffffff !important;
margin: 10px 0 !important;
background: #444 !important;
padding: 9px 12px !important;
display: inline-block !important;
border: 0 !important;
font-family: "Open Sans", sans-serif !important;
font-weight: bold !important;
cursor: pointer !important;
width: auto !important;
-webkit-transition: all 0.1s ease-in-out !important;
-moz-transition: all 0.1s ease-in-out !important;
-o-transition: all 0.1s ease-in-out !important;
-ms-transition: all 0.1s ease-in-out !important;
transition: all 0.1s ease-in-out !important;
}
input[type="submit"]:hover, #pageContent input[type="button"]:hover {
background: #2db2ea !important;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
#pageContent input[type="button"] {
margin-right: 4px !important;
}
#pageContent form small {
margin-left: 8px;
}
#pageContent form td {
padding-right: 8px !important;
}
#pageContent select {
padding: 5px 8px !important;
}
#pageContent form input[type="text"], #pageContent form input[type="username"], #pageContent form input[type="password"], #pageContent select, #pageContent textarea, #pageContent select.form-margin {
margin-bottom: 5px !important;
}
#media only screen and (max-width: 1029px) {
#sitenav {
display: none !important;
}
#wrapper {
margin: 15px auto !important;
padding: 25px 70px !important;
-webkit-box-shadow: none;
box-shadow: none;
width: 100%;
}
body {
background: #fff;
}
/*#header, #main_container {*/
/*width: 768px !important;*/
/*}*/
#pageContent {
width: 110%;
}
#footer {
margin: 0 auto;
padding: 15px 0 0 0;
width: 100% !important;
}
}
/*#media only screen and (max-width: 767px) {*/
/*div#sitenav {*/
/*float: none !important;*/
/*display: none !important;*/
/*}*/
/*.js #nav {*/
/*display: none !important;*/
/*}*/
/*}*/
You need display: block on elements that have margin: 0 auto if you want them centered...
#wrapper {
margin: 15px auto !important;
padding: 25px 70px !important;
-webkit-box-shadow: none;
box-shadow: none;
width: 100%;
display:block;
}
For education I tried to make my site in a sort of flat design, I use bootstrap as framework. I installed an google custom search as the site search.
In firefox no problems at all, but when I open my site in IE (the usual course of messup), it gets pushed outside the header in a full width
The searchbar gets to 80% width on 1000px or lower, but in ie its 100% all the time. (I'm using IE 11)
I couldn't find any code that should be off
.cse .gsc-control-cse, .gsc-control-cse {
background-color: transparent !important;
border: none !important;
}
.gsc-control-cse {
border:none !important;
background-color: transparent !important;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
border-color: none !important;
background-color: #3cb878 !important;
background-image: none;
filter: none;
}
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
border-radius: 5px;
}
input#gsc-i-id1.gsc-input0 {
background-image: none !important;
background-color: #fff;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
border-color: #369;
background-color: #3CB878;
background-image: none;
min-height:25px;
filter: none;
}
.gsc-search-box {
height: 100%;
margin-top: 20px;
display: inline-block;
}
/*google*/
.social .pull-left{
overflow: hidden;
}
#gsc-i-id1.gsc-input{
background-color: #fff;
background-image: none !important;
}
.gsc-control-cse, .gsc-control-cse{
height: 30px;
margin:0px !important;
padding: 0px !important;
border: 0px !important;
background-color: transparent !important;
}
.gsc-control-cse {
border: 0px !important;
background-color: transparent !important;
}
input.gsc-search-button{
height: 25px !important;
}
.gsc-input-box{
border-radius: 5px ;
background-image: none !important;
}
.gsc-search-button .gsc-search-button-v2 {
background-image: url(../img/search_box_icon.png);
background-repeat: no-repeat;
background-position: center center;
border: 0px !important;
}
.gsc-search-button .gsc-search-button-v2:hover {
background-color: #00a651 !important;
background-image: url(../img/search_box_icon.png);
}
.gsc-search-box .gsc-input {
line-height: 0px !important;
}
#media (max-width: 1000px) {
#___gcse_0{
width: 80%;
margin: 0 auto;
}
Is it possible IE is struggling with the media queries ?
The online sample is http://jurjenfolkertsma.nl/bootstrap/
I got working by adding changes to the stylesheet:
.navbar-right {
width: 200px; /* Change it if needed */
}
#media (max-width: 1000px) {
.navbar-right{
width: auto;
}
}
Also the only CSS written for .navbar-right I saw was margin-right: -15px;. Don't know if this was intended or some of your code is missing. :)