0

I have a following HTML code on my webpage to create a list

<ul class="rightdivul">
               <li id="linkedinli">
                   <a href="https://www.linkedin.com/in/xxxxxx">www.linkedin.com/in/xxxxxx</a>
               </li>



               <li id="twitterli">
                   <a href="https://twitter.com/xxxxx">@xxxxxx</a>
               </li>

           </ul>

I am using the following CSS to style this:

ul.rightdivul {
text-align: left;
list-style-type: none;
font-weight: 300;
padding-left: 20px;
font-weight: 300;
color: #23313E;

}

#linkedinli {
background: url(images/Linkedin.svg) no-repeat;
padding-left: 30px;
margin-bottom: 15px;


}

#twitterli {
background: url(images/Twitter.svg) no-repeat;
padding-left: 30px;
margin-bottom: 3px;

}

In Chrome, Firefox, Opera, Safari, Edge the background image is displayed correctly before the text. However in IE10, IE11 the background image is overlapping the text. Am I missing something here?

Dresse
  • 473
  • 6
  • 15

1 Answers1

0

Try writing this:

background: url(/*your url*/);
background-repeat: no-repeat;

Instead of this:

background: url(/*your url*/) no-repeat;
Larpee
  • 800
  • 1
  • 7
  • 18
  • Thanks for your reply Larpee, unfortunately adjusting this did not solve the issue. – Dresse Mar 08 '17 at 19:41
  • @Dresse Oh, I'm sorry it didn't – Larpee Mar 08 '17 at 20:49
  • Apparantly the issue was in my svg images, I found the answer eventually in following topic: http://stackoverflow.com/questions/17944354/svg-background-image-position-is-always-centered-in-internet-explorer-despite-b – Dresse Mar 08 '17 at 22:33
  • @Dresse I'm glad you found the answer, thank you for sharing, I was intrigued by your problem – Larpee Mar 08 '17 at 23:25