CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
dot
dot

Reputation: 15660

css rule not being applied in safari, but ok in firefox

I'm trying to figure out why this rule is not being applied in Safari or IE 

.navbar-inner {
    min-height: 40px;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #333333 !important;
    background-image: linear-gradient(to bottom, rgb(74, 74, 74), rgb(54, 54, 54)) !important;
    background-repeat: repeat-x;
    border: 1px solid rgb(212, 212, 212);
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.067);
}

Basically, I'm trying to overwrite the background color of the navbar in bootstrap. as you can see, I've added the !important keyword, just to test for css specificity issues. That still didn't resolve the issue. Can you give me any suggestions for troubleshooting this? It works fine in Firefox.... and I'm just testing in Chrome.

Thanks.

Upvotes: 0

Views: 166

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

Different browsers use different gradient properties. This is a really good tool for generating them.

For this you can use:

.navbar-inner {
    background: rgb(74,74,74); /* Old browsers */
    background: -moz-linear-gradient(top, rgb(74,74,74) 1%, rgb(54,54,54) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(74,74,74)), color-stop(100%,rgb(54,54,54))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgb(74,74,74) 1%,rgb(54,54,54) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgb(74,74,74) 1%,rgb(54,54,54) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgb(74,74,74) 1%,rgb(54,54,54) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgb(74,74,74) 1%,rgb(54,54,54) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4a4a', endColorstr='#363636',GradientType=0 ); /* IE6-9 */
}

!important shouldn't be necessary when trying to override Bootstrap default styling. Just make sure your Bootstrap styling is added to the page before your custom styling.

Upvotes: 3

Related Questions