Geek asks and answers

Twitter bootstrap button changes rendering weird in firefox and chrome

I have a problem when I try to override the primary twitter bootstrap buttons (v 2.0.3) with my own colors and works fine in IE, but not in FireFox or Chrome. Therefore, on my page, I first refer to bootstrap.css, and then immediately after that I refer to my own stylesheet, which has its own changes. Now my classes are called the same as bootstrap, but I would think mine would take precedence, since my stylesheet is related to bootstrap:

<link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="~/Content/mystyles.css" rel="stylesheet" type="text/css" />

... so in mystyles.css I have the following (which again, as in bootstrap.css, but I have different colors):

.btn-primary {
  background-color: #faa732 !important;
  *background-color: #f89406 !important;
  background-repeat: repeat-x !important;
  border-color: #f89406 #f89406 #ad6704 !important;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
   background-image: linear-gradient(top, #fbb450, #f89406) !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  background-color: #f89406 !important;
  *background-color: #df8505 !important;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #c67605 \9 !important;
}

! , - , , , ( ). , .... , IE , ( - ), , , - , , .

!!

+3
1

, background-image, , , :

.btn-primary {
    background-image: none;
    filter: none;
}

: http://jsfiddle.net/ETagZ/

+6

More articles:


All Articles