CSS Transition issue - css

Question

I have tried hunting for this answer, and I am hoping that upon looking for it I havent missed an obvious answer. I have a website, www.silenticonstudio.com, that before I forwarded the address, and used its host site the transition was working in Chrome. Once it became forwarded, it stopped working. It works in Firefox, IE, but not android browswer. It works on chrome on my phone, but not IE mobile. Anyone have any answers? What am I missing? I would be greatly appreciative.
CSS:
{
/*gallery*/
img.floatLeft {
float: left;
margin: 20px;
border:groove;
padding-right:15 px;}
.imagebox { float: left; width: 180px; margin-right: 20px; }
#gallery {width:740px; height:400px; position:relative; z-index:100; padding-right:10px;margin-bottom:150px}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; float:right;}
#gallery ul li {display:inline; width:60px; height:60px; float:left;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; padding:4px; border:1px solid #fff;}
#gallery ul li a img {width:50px; height:50px; border:0;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-icab-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}
#gallery ul li a b {position:absolute; visibility:hidden; left:0; top:5px; display:block; width:560px; height:350px; ;
filter: alpha(opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity:0;
-webkit-transition: 0.6s ease-in-out;
-moz-transition: 0.6s ease-in-out;
-o-transition: 0.6s ease-in-out;
-ms-transition: 0.6s ease-in-out;
-khtml: 0.6s ease-in-out;
transition: 0.6s ease-in-out;
}
#gallery ul li a b img {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-khtml: scale(0);
transform: scale(0);
-webkit-transition: 0.6s ease-in-out;
-moz-transition: 0.6s ease-in-out;
-o-transition: 0.6s ease-in-out;
-ms-transition: 0.6s ease-in-out;
-khtml: 0.6s ease-in-out;
transition: 0.6s ease-in-out;
}
#gallery ul li a:hover {white-space:normal; outline:0;}
#gallery ul li a:hover b {filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:1; visibility:visible;}
#gallery ul li a:hover b img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-khtml: scale(1);
transform: scale(1);
}
#gallery ul li a b i {display:block; width:570px; height:360px; text-align:center; display:table-cell; vertical-align:middle;}
#gallery ul li a b i img {width:auto; height:auto;/* border:1px solid #000; padding-left:50px;*/
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-icab-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}

Answer 1

Simply try something like this
HTML
<ul>
<li>blah</li>
<li>blah2</li>
</ul>​
CSS
ul li:nth-child(1){
background-color: #ff0000;
}
ul li:nth-child(2){
background-color: #00ff00;
}
li {
display: inline-block;
height: 20px;
width: 100px;
text-align: center;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
li:hover {
width: 300px;
}​