[Nublet]

Okay, so I have a gradient background on my navbar and one button, it displays perfectly in Chrome, Firefox and Opera but IE just displays it as a bland color.

Here's the navbar in Chrome(above) and IE(below):



And here's my code for it:

Html:

  <div id="navbar">
		<ul>
			<li><a href="http://google.com">Forsíða</a></li>
			<!--<li><a href="http://google.com">Hurrderp</a></li>-->
			<li><select class = "Hurroption">
			<option>Herpderp</option>
			<option>Hurrdurr</option>
			</select></li>
			<li><a href="http://google.com">Ráð</a></li>
			<li><a href="http://google.com">Almenn umræða</a></li>
			<li><a href="http://google.com">Hurrdurr</a></li>
		</ul>
</div>

CSS

 #navbar
{
	position: fixed;
	left:41%;
	margin-top:-10px;
	margin-left: -290px;
	background-color: #FAA2AD;
	border-radius: 5px;
}

#navbar ul {
list-style-type:none;
margin:5px;
padding:2px;
/*border: 1px solid #333;*/
/*width: 160px;*/
font: bold 12px 'Lucida Grande', Verdana, sans-serif;

}
#navbar li {
/*background: #DDD;*/
display: inline;
margin: 0;
padding: 10px 30px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #666;
border-bottom: 1px solid #aaa;
border-radius: 5px;

background: #fcecfc; /* Old browsers */
background: -moz-linear-gradient(top,  #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcecfc), color-stop(50%,#fba6e1), color-stop(51%,#fd89d7), color-stop(100%,#ff7cd8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 ); /* IE6-9 */
}
#navbar a
{
	text-decoration: none;
	color: white;
}

.Hurroption
{
	background-color: #FF66CC;
	font-family: /*Verdana, sans-serif;*/;
	color: white;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding:5px 7px;
	font-size: 15px;
}

The filter seems to target IE 6-9, so I'm wondering what's wrong here.

Ps. I got the gradient code from a website.

[IJET]

Never used that website before, but went ahead and checked it out. In the lower right hand corner beneath the CSS they give you, there is a checkbox that says IE9 support. When I clicked it and followed the instructions the code started working for me.

[Nublet]

IJET, on 18 December 2012 - 02:03 PM, said:

Never used that website before, but went ahead and checked it out. In the lower right hand corner beneath the CSS they give you, there is a checkbox that says IE9 support. When I clicked it and followed the instructions the code started working for me.

I'm wondering which element I should put the class "gradient" on. I tried putting it on the li elements and nothing happened, also tried it on ul and that didn't work. Should I make a div with the class .gradient over the id #navbar?


Yeah, I'm a noob

[IJET]

Okay, I actually didn't even bother with that part and it still worked(IE9, don't have 6-8).

It's this line here that is the most important:

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw

^ don't use that as it will set it to a blue gradient, it's just an example of the piece you are missing.

edit:: this works:

background: #ff5db1; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNWRiMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZjAxN2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ff5db1 0%, #ef017c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5db1), color-stop(100%,#ef017c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ff5db1 0%,#ef017c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); /* IE6-8 */

This post has been edited by IJET: 18 December 2012 - 02:25 PM

[Nublet]

IJET, on 18 December 2012 - 02:19 PM, said:

Okay, I actually didn't even bother with that part and it still worked(IE9, don't have 6-8).

It's this line here that is the most important:

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw

^ don't use that as it will set it to a blue gradient, it's just an example of the piece you are missing.

edit:: this works:

background: #ff5db1; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNWRiMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZjAxN2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ff5db1 0%, #ef017c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5db1), color-stop(100%,#ef017c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ff5db1 0%,#ef017c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); /* IE6-8 */

Thank you very much, it works now