IE does not show CSS gradient and font-shadow effect correctly

Asked

Viewed 216 times

4

Can anyone help me? I can’t get IE to accept the gradient effect, load the font and use the font-shadow below. In fact, IE is not loading anything other than text with a generic font (no background).

In Chrome is perfect.

Follows a fiddle: http://jsfiddle.net/YxvhU/

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 */
}
css3 internet-explorer
  • 2

    IE version? Then with the version you can look http://caniuse.com/#feat=css-textshadow

  • 1

    IE10 is cool. If you’re trying to support an earlier version, the problem isn’t your code, it’s your browser.

  • My IE is the 10 and is not showing anything.. Default settings. What can be?

  • @Punchthenewbie takes advantage and edits the question to inform that is the IE10.

1 answer

1

Try to include the tag in your html.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Dancing+Script:700">

And see if it works. Here for me it worked without problem of the two forms in IE10.

Browser other questions tagged css3 internet-explorer

You are not signed in. Login or sign up in order to post.