Databases
StackOverflow2013
Postsdbo
POCSS background url not working with Chrome
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS background url not working with Chrome
    text
    copied!<p>So I have Chrome v20.xxx, and I'm trying to make the images on my blog appear like that have a drop shadow, using both CSS3 and background url. It's working great with FF, but the background image isn't showing up for Chrome. My pseudo-code is as follow:</p> <pre><code>&lt;p&gt; &lt;a&gt; &lt;span class="img_wrapper"&gt; &lt;img class="with-borders"&gt; &lt;/span&gt; &lt;/a&gt; &lt;/p&gt; </code></pre> <p>Here's my CSS:</p> <pre><code>img.with-borders, img.tn { margin: 5px 0 0 0; padding: 8px; background: #f1f1f1; border: solid #777; border-width: 1px 2px 2px 1px; box-shadow: 0 15px 15px -15px rgba(0, 0, 0, 0.9); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } span.img_wrapper { background: url('./images/et-image-sliderleft-shadow2.png') no-repeat left bottom, url('./images/et-image-sliderright-shadow2.png') no-repeat right bottom; padding-bottom: 14px; } </code></pre> <p>It seems that Chrome is limiting the view of the background image by how much the wrapper spans, whereas Firefox ignores such limit and let the inner background image "overflow" the inline element, which is exactly what I want.</p> <p>Please, how do I make it work for Chrome?</p> <p>Thank you.</p> <p>P.S.: I can paste this on jsfiddle if you prefer.</p> <p>Update: screen shot: <a href="http://i.imgur.com/ISXDr.png" rel="nofollow">http://i.imgur.com/ISXDr.png</a></p> <p>Update #2: here's jsfiddle <a href="http://jsfiddle.net/gNtea/" rel="nofollow">http://jsfiddle.net/gNtea/</a>. What's weird is that it WORKS perfectly when viewing it in jsfiddle, just not on the <a href="http://tambnguyen.com/4493-chemin-vert-giacomo-miceli/" rel="nofollow">live site</a>. I thought it was the relative path issue, so I switched my production CSS to using absolute path, no help.</p> <p>Update #3: I copied the source code of the webpage, pasted it on jsfiddle, it works. I view the page on the actual live site, it doesn't work. WTF? <a href="http://jsfiddle.net/eXYS9/" rel="nofollow">http://jsfiddle.net/eXYS9/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload