Question

I have this as my rule for rounded:

.rounded { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

On my site I’m working on, http://urlme.cc/movies6, if you view it in Chrome, each movie div has the class “rounded”, but, the div has straight edges.

In Firefox, it’s rounding correctly. Please see image comparison below.

You can view source / inspect elements on the above link, but, the html looks basically like this:

<div class="movie rounded">
  <a href="#"><img src="..." /></a>
  <div class="details">1 hr, 20 min</div>
</div>

Question: any reason why Chrome is not rounding those div.movie corners, while Firefox is? Thanks!

Answer 1

Taking off position:relative on .movie seemed to do it in Chrome Developer Tools.