CODEWITHSUNDEEP
htmlcsslistinternet-explorergoogle-chrome
user2647939
user2647939

Reputation:

CSS Transition Problems in IE

I have a problem with HTML and CSS. So I have a CSS style for my list but in IE it doesn't work.

Here is my HTML file:

<ul class="main-ul2">
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Article</span></a></li>
    <li><a href="#"><span>Blog</span></a></li>
    <li><a href="#"><span>Gallery</span></a></li>
</ul>

And here is my CSS file:

.main-ul2 li {
    margin-left: 0;
    float:left;
    position:relative;
    width:25%;
    text-align:center;
    }
.main-ul2 li a {

    display:block;
    padding-bottom: 20px;
    padding-right:10px;
    padding-top: 10px;
    padding-left:10px;
    text-decoration:none;
    position: relative;
    z-index: 100;
    background-color: rgba(164, 164, 164, 0.2);
    –ms-??transition: all 1s;
    -webkit-transition: all 1s;
   -moz-transition: all 1s;
   -o-transition: all 1s;
   transition: all 1s;
}
.main-ul2 li a span{
   display:block;
   padding-top:10px;
   font-weight:700;
   font-size: 20px;
   color: rgba(120, 120, 120, 0.9);
   text-transform:uppercase;
   font-family: 'Kotta One', serif;

.main-ul2 li:hover span{
   color: #fff;
}

.main-ul2 li:nth-child(1):hover a{
background-color: rgba(175,54,55,0.8);
–ms-transform:rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.main-ul2 li:nth-child(2):hover a{
   background-color: rgba(199, 204, 73, 0.8);
   –ms-transform:rotate(-3deg);
   -moz-transform: rotate(-3deg);
   -webkit-transform: rotate(-3deg);
   -o-transform: rotate(-3deg);
   transform: rotate(-3deg);
}
.main-ul2 li:nth-child(3):hover a{
   background-color: rgba(213, 135, 11, 0.8);
   –ms-transform:rotate(3deg);
   -moz-transform: rotate(3deg);
   -webkit-transform: rotate(3deg);
   -o-transform: rotate(3deg);
   transform: rotate(3deg);
}
.main-ul2 li:nth-child(4):hover a{
   background-color: rgba(51, 143, 144, 0.8);
   –ms-transform:rotate(3deg);
   -moz-transform: rotate(3deg);
   -webkit-transform: rotate(3deg);
   -o-transform: rotate(3deg);
   transform: rotate(3deg);
}

So if you are using Google Chrome you can insert my code in CCS Desk or any other online CSS editors and everything works fine (bullets are changing color and moving), but if you open my code in IE you'll see that it's not working fine.

I have search for it in Google, and I found that I need to add Microsoft transform.

So can someone tell me how can I add Microsoft transform or if there any other way to fix this?

Thanks.

Upvotes: 0

Views: 2337

Answers (1)

mikedugan
mikedugan

Reputation: 2393

IE10 indicates that you can drop the -ms- prefix and use the base property. That said, I would continue to use it to support older browsers.

If you include the -o- and -webkit- you should be good to go with most recent browsers. -moz- is also available if you need to support old versions of Firefox.

If you really need to support old browsers (as far as IE6), you should probably utilize JavaScript because....well...anything before IE9 was pretty bad.

Upvotes: 3

Related Questions