CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-8
user782104
user782104

Reputation: 13545

Background image is not position well in IE 8

nav li a.home                   { background:url('../img/custom_icons/home.png') no-repeat center; background-size: 30px 30px; background-position: 0px -1px;}

nav li a.contact                { background:url('../img/custom_icons/email.png') no-repeat center; background-size: 32px 35px; background-position: 0px -1px; }

nav li a.show_all               { background:url('../img/custom_icons/slide.png') no-repeat center; background-size: 35px 50px; background-position: -5px -10px; }

#facebook {
    background: url(../img/custom_icons/facebook.png) no-repeat;
    background-size:30px 30px;
}

#sina {
    background: url(../img/custom_icons/sina.png) no-repeat;
    background-size:30px 30px;
}

I found that those background image in chrome / fx or other browser is perfectlly positioned, but not in IE 8 , it is either too small/ big or just move to other place.How to fix the problem and work just the same as other browser ? thanks

Updated : After adding ms filter, still not working?

nav li a.home                   { background:url('../img/custom_icons/home.png') no-repeat center; background-size: 30px 30px; background-position: 0px -1px;}

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../img/custom_icons/home.png',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../img/custom_icons/home.png',
sizingMethod='scale')";

Here is the css file after adding the suggested filter. However, it still not working? Is it correct to place the code like this? it seems quite weird since there is an ; at the end and a " after ='scale') . Thanks

Upvotes: 0

Views: 10386

Answers (2)

Nabil Kadimi
Nabil Kadimi

Reputation: 10394

This answer here https://stackoverflow.com/a/6353808/358906 is probably better than my original answer below.

In IE8, make sure the browser mode is set to IE8 Standards, if it's not, change it and see if it solves your problem. If it solves the problem then you will need to enfore IE8 to always use the I8 Standards mode either by using meta tags or server headers.

IE8 Developer Tools

Upvotes: 1

GeckoTang
GeckoTang

Reputation: 2785

"background-size" is not working on IE8.

http://caniuse.com/#feat=background-img-opts

Upvotes: 2

Related Questions