city_lights
New Member
I'm coding a script that will populate an area with circles of portraits and slogans scattered here and there. I've managed to place the elements neatly side by side except in Internet Explorer. I'm using IE9 so in theory, it should work but doesn't.I've tried everything I can think of but nothing seems to work. I'm hoping someone here has a better idea than me on how to beat IE at this.JSFiddle demo here: http://jsfiddle.net/TnUxt/HTML code:\[code\]<div class='wrapper'><ul><div class='row'> <li class='dataLi'> <a href='' class='fancybox'> <div class='overlay'> <div class='circle' style="background:url(http://bit.ly/Z9CY5A) no-repeat;background-size: cover"></div> </div> </a> </li> <li class='dataLi'> <a href=''> <div class='circle slogan'>test</div> </a> </li> <li class='dataLi'> <a href='' class='fancybox'> <div class='overlay'> <div class='circle' style="background:url(http://bit.ly/ULb3ux) no-repeat;background-size: cover"></div> </div> </a> </li></div><div class='row'> <li class='dataLi'> <a href='' class='fancybox'> <div class='overlay'> <div class='circle' style="background:url(http://bit.ly/XVpxN5) no-repeat;background-size: cover"></div> </div> </a> </li> <li class='dataLi'> <a href=''> <div class='circle slogan'>test</div> </a> </li> <li class='dataLi'> <a href='' class='fancybox'> <div class='overlay'> <div class='circle' style="background:url(http://bit.ly/15Wl5gM) no-repeat;background-size: cover"></div> </div> </a> </li></div></ul>\[/code\]CSS code:\[code\].wrapper {width: 700px;height: 1000px;margin: 0 auto;border: 1px solid black;}.row {width: 100%;height: 200px;}.circle {background: #d9d6d1;width: 200px;height: 200px;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;opacity:1;filter:alpha(opacity=100);vertical-align: top;display: inline-block;*zoom: 1;*display: inline;}.circle:hover {opacity: 0.5;filter:alpha(opacity=50);background: #fd761f;}.slogan {background:#fd761f;color: #fff;text-align: center;width: 200px;height: 200px;font-size: 16px;line-height: 200px;vertical-align: top;display: inline-block;*zoom: 1;*display: inline;}.overlay:hover {background:#fd761f;width: 200px;height: 200px;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;}ul {margin: 0;padding: 0;}li {list-style-type: none;display: inline-block;*zoom: 1;*display: inline;}\[/code\]