CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-8backgroundbackground-image
Kyle Suss
Kyle Suss

Reputation: 455

IE8 Background Image Not Showing

I have an unordered list that uses background images. All's fine in Chrome & FF, but IE8 is presenting some issues. The background images simply don't load. How can I get them to show in IE8? Is this a background image issue?

<ul class="service-icons">
  <li>
    <a id="service-icon-routine" href="#">
      <span class="service-category-title">Routine Service</span>
    </a>
  </li>
</ul>

Styles

ul.service-icons {
    list-style-type: none;
    width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

ul.service-icons li {
    display: inline-block;
    width: 157px !important;
    height: 140px;
    padding: .5em !important;
    margin-bottom: 1.5em;
}

ul.service-icons li a {
    padding: 0em 0em 6.7em 0em;
    width: 102px !important;
    display: block;
    height: 15px;    
    text-decoration: none;
    margin-left: 2.2em;
}

.service-category-title {
    display: block;
    padding-top: 120px;
    text-align: center;    
}

#service-icon-routine {
    background: url('http://i.imgur.com/LieBz.png');
    background-position: 0px 0px;
}

Any help is appreciated!

Upvotes: 3

Views: 10522

Answers (4)

mrwhy
mrwhy

Reputation: 1

make it -ms-border-radius: 8px;

ms for microsoft

Upvotes: 2

user2132041
user2132041

Reputation:

Just to jump in on this, I had a problem with a drupal plugin setting a filter which had to be disengaged in my main css. on the image css set the filter to :

filter: ;

That should overide it. Thought this might help

Upvotes: 0

ScottS
ScottS

Reputation: 72261

I think it is choking on the use of just background, as it is loading as 

background-image: url("null");

Changing it to the following should fix it:

#service-icon-routine { 
    background-image: url('http://i.imgur.com/LieBz.png'); 
    background-position: 0px 0px; 
}

Upvotes: 0

Brett
Brett

Reputation: 721

Try this:

background:url(http://i.imgur.com/LieBz.png) no-repeat;

Also might help to set the height and width of the image for #service-icon-routine

Upvotes: -1

Related Questions