CODEWITHSUNDEEP
htmlcssgoogle-chrome
PopSmith
PopSmith

Reputation: 103

CSS shadow works in IE/Edge not in Chrome or Firefox

The numbers in this list do not have a shadow (they are just white) in Chrome or Firefox. In IE/Edge they have a shadow. I am trying to get the shadow to display in Firefox and Chrome as well.

I tried adding rgba(0,0,0,1) to the end of each text-shadow line, instead of #000, but that didn't work (like this):

Did not work

text-shadow:
   3px 3px 0 rgba(0,0,0,1),
 -1px -1px 0 rgba(0,0,0,1),  
  1px -1px 0 rgba(0,0,0,1),
  -1px 1px 0 rgba(0,0,0,1),
   1px 1px 0 rgba(0,0,0,1);

Here's a jsfiddle for the code below: https://jsfiddle.net/wxLftaLd/

CSS

#main {
color: #fff;
text-shadow:
   3px 3px 0 #000,
 -1px -1px 0 #000,  
  1px -1px 0 #000,
  -1px 1px 0 #000,
   1px 1px 0 #000;
left: -200px;
margin: auto;
margin-top: auto;
position: relative;
top: 150px;
width: auto;
font-size: 1.5em;
}

ol {
    list-style-position: inside;
    padding-left: 0;
}

HTML

<div id="main">
            <h1 class="center">Friends list</h1>
            <ol>
                <li>Erin</li>
                <li>Jacob</li>
                <li>Frankie</li>
                <li>Bob</li>
            </ol>
</div>

Upvotes: 1

Views: 67

Answers (1)

javc91
javc91

Reputation: 56

Try the following:

#main {
    color: #fff;
    text-shadow:
     3px 3px 0 #000,
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
    left: -200px;
    margin: auto;
    margin-top: auto;
    top: 150px;
    width: auto;
    font-size: 1.5em;
}

ol {
    counter-reset: li;
    list-style-type: none;
}

ol li {
    position:relative;
}

ol li:before {
    content: counter(li)'.';
    counter-increment: li;
    position:absolute;
    right:100%;
    margin-right:10px;
    text-shadow:
      3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
     -1px 1px 0 #000,
      1px 1px 0 #000;
}

Upvotes: 2

Related Questions