title: Print CSS max-width not working in chrome, opera, ie
body: <p>I have this product page that users are able to print; it has an image whose container has a max-width attribute which firefox interprets correctly but other browsers don't.</p>
  
  <p>I even tried deleting the cache.</p>
  
  <p>Relevant HTML:</p>
  
  <pre><code>&lt;div id="img_producto" class="span4 slider_area"&gt;
      &lt;div class="view view-first"&gt;
          &lt;img alt="" src="images/gallery/2.jpg"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Relevant CSS:</p>
  
  <pre><code>.span4 {
      width: 370px;
  }
  
  .view {
      background: #f1f1f1 url("../img/spinner.gif") no-repeat scroll center center !important;
      cursor: default;
      float: left;
      overflow: hidden;
      position: relative;
      text-align: center;
      width: 100%;
  }
  
  .view-first img {
      transition: all 0.2s linear 0s;
  }
  
  img {
      border: 0 none;
      height: auto;
      max-width: 100%;
      vertical-align: 10%;
  }
  </code></pre>
  
  <p>Print CSS:</p>
  
  <pre><code>.top_line, .page_head, .blog_sidebar, .blog_item_description, #ficha_tecnica hr, .footer, .bottom_line {
      display: none; // Hide irrelevant stuff
  }
  
  #ficha_tecnica p {
      margin-bottom: 2px !important;
  }
  
  img {
      max-width: 50% !important; // ff displays correctly even without this
  }
  </code></pre>
  
  <p>FF preview (correct):
  <a href="https://i.stack.imgur.com/JSKKV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JSKKV.png" alt="enter image description here"></a></p>
  
  <p>chrome preview:
  <a href="https://i.stack.imgur.com/xqeCr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xqeCr.png" alt="enter image description here"></a></p>