CODEWITHSUNDEEP
cssinternet-explorerbrowser
Patrick Reck
Patrick Reck

Reputation: 11374

CSS changing colors in different browsers

I am experiencing a somewhat weird bug on a website I am building.

Using Chrome/Firefox/Safari/IE10 it works fine. However, using IE9 it turns into blue! What is wrong?

I suspect this code is messing it up (@colorOne, @colorTwo is replaced by the actual colors):

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

Upvotes: 0

Views: 90

Answers (2)

Adrift
Adrift

Reputation: 59779

You have a blue Microsoft filter gradient in your CSS on the #top element and other elements within your site. But since you're specifically asking about the header, just remove:

#top {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@colorOne', endColorstr='@colorThree', GradientType=1);
  /* Remove this from any other element you wish to be green */
}

Upvotes: 3

Zsolt Szilagyi
Zsolt Szilagyi

Reputation: 5006

The only difference is a gradient only interpreted by IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@colorOne', endColorstr='@colorThree', GradientType=1

Simply remove it.

Upvotes: 1

Related Questions