Question

i’m using a CSS3 scale technique on my website, it works fine in Chome, IE9 and Firefox, but I can’t seem to get it to work on IE8, ive tried looking at filters but I can’t seem to get anywhere.

This is my HTML

<div id="nav">
    <ul id="index_cards">
            <li id="card-1">
                <h3><strong>Home</strong></h3>

            </li>
            <li id="card-2">
                <h3><strong>About/Contact</strong></h3>

            </li>
            <li id="card-4">
                <h3><strong>Portfolio</strong></h3>

            </li>
            <li id="card-5">
                <h3><strong>Services</strong></h3>

            </li>
    </ul>
</div>

This is my CSS

ul#index_cards {
  margin-top:50px;
  text-align:center;
}

ul#index_cards li {
  background:url(../images/card_bg.jpg) repeat;
  height:50px;
  width:145px;
  display:block;
  float:left;
  border:1px solid #666;
  padding:25px 10px;
  position:relative;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-box-shadow: 2px 2px 10px #000;
  -ms-box-shadow: 2px 2px 10px #000;
  -webkit-box-shadow: 2px 2px 10px #000;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

#card-1 {
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  line-height:10px;  
  z-index:1;
  left:-110px;
  top:125px;
}

#card-2 {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  line-height:10px;  
  z-index:2;
  left:-100px;
  top:80px;
}

#card-4 {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  line-height:10px;  
  z-index:2;
  right:-400px;
  top:80px;
}

#card-5 {
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  line-height:10px;  
  z-index:1;
  right:-410px;
  top:125px;
}

/* Hover States */

ul#index_cards li:hover {
  z-index:4;
}

#card-1:hover {
  -moz-transform: scale(1.1) rotate(-18deg);
  -ms-transform: scale(1.1) rotate(-18deg);
     -webkit-transform: scale(1.1) rotate(-18deg); 
}

#card-2:hover {
  -moz-transform: scale(1.1) rotate(-8deg);
  -ms-transform: scale(1.1) rotate(-8deg);
   -webkit-transform: scale(1.1) rotate(-8deg); 
}

#card-3:hover {
  -moz-transform: scale(1.1) rotate(2deg);
  -ms-transform: scale(1.1) rotate(2deg);
   -webkit-transform: scale(1.1) rotate(2deg); 
}

#card-4:hover {
  -moz-transform: scale(1.1) rotate(12deg);
  -ms-transform: scale(1.1) rotate(12deg);
   -webkit-transform: scale(1.1) rotate(12deg); 
}

#card-5:hover {
  -moz-transform: scale(1.1) rotate(22deg);
  -ms-transform: scale(1.1) rotate(22deg);
   -webkit-transform: scale(1.1) rotate(22deg); 
}

/* Content Styling */

ul#index_cards li img {
  margin-top:7px;
  background:#eee;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #aaa;
  -webkit-box-shadow: 0px 0px 5px #aaa;
}

ul#index_cards li p {
  margin-top:4px;
  text-align:left;
  line-height:28px;  
}

You can see the desired outlook here;
tubebackgrounds.co.uk/portfolio

Thank guys.

Answer 1

IE8 doesn’t support CSS3 I’m afraid. You’ll have to look for an alternative way to do what you’re trying to do or accept the fact that IE won’t do it but other (better) browsers will.