Can anyone help me? I can not get IE to accept the gradient effect, load the font and use the font-shadow below. In fact, IE is not loading anything but text with a generic font (no background).
Chrome is perfect.
Follow a fiddle: link
And below the code:
HTML:
<body>
<div id="wrapper">
<div id="upperlogotext"><h1>Esse texto deve ser centralizado com font-shadow e usando a fonte Dancing Script</h1></div>
</div>
CSS:
@import url("http://fonts.googleapis.com/css?family=Dancing+Script:700");
html {
height: 100%;
}
body {
background: #f3e849; /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI3MSUiIHN0b3AtY29sb3I9IiNmM2U4NDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5NyUiIHN0b3AtY29sb3I9IiNmOWY4ZTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f3e849 71%, #f9f8e9 97%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(71%,#f3e849), color-stop(97%,#f9f8e9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f3e849 71%,#f9f8e9 97%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f3e849 71%,#f9f8e9 97%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f3e849 71%,#f9f8e9 97%); /* IE10+ */
background: linear-gradient(to bottom, #f3e849 71%,#f9f8e9 97%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e849', endColorstr='#f9f8e9',GradientType=0 ); /* IE6-8 */
/* Added to html height 100% this makes the gradient full size in body */
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
#wrapper {
text-align: center;
}
#upperlogotext {
font-family: 'Dancing Script', cursive;
font-size: 3em;
}
#upperlogotext h1 {
color: white;
text-shadow: 3px 1px 2px rgba(150, 150, 150, 1);
filter: dropshadow(color=#969696, offx=3, offy=1); /* IE and lower */
}