I'm encountering an issue with my CSS3 animation that works perfectly on Firefox but doesn't display properly on the Chrome browser. You can view the final result on www.stamp4all.com, where the animation involves rotating arrows.
Below is the CSS code:
/* Some stylesheet reset */
#sidemenu > ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}
/* The container */
#sidemenu > ul {
display: block;
position: relative;
width: 133px;
/* The list elements which contain the links */
}
#sidemenu > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 100%;
}
/* General link styling */
#sidemenu > ul li a {
/* Layout */
display: block;
position: relative;
margin: 0;
border-top: 0.14em dotted #3a3a3a;
border-bottom: 0.14em dotted #1b1b1b;
padding: 12px 15px;
/* Typography */
font-family: Helvetica, Arial, sans-serif;
color: #d8d8d8;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 1px #000;
font-size: 15px;
font-weight: 300;
/* Background & effects */
background: #282828; /* !!! animated menue background !!!! */
}
#sidemenu > ul li > a {
border-radius:10px;
}
/* The hover state of...
And here is the HTML code:
<div id="sidemenu">
<ul>
<li><a href="index.php?main=include/about_us.html" >אודות</a></li>
<li class='has-sub'><a href="index.php?main=products" >חותמת מלבנית</a>
<ul>
<li><a href="index.php?main=products/rectangle/p20.html" >P20 - 14X38מ"מ</a></li>
...
Can anyone explain why the rotation isn't working in Chrome?