title: Logo display issue on safari ONLY
body: <p>I am creating a website which has the following code in it.</p>
  
  <pre><code>&lt;style&gt;
  .browser_logo{
  width:100%;
  }
  &lt;/style&gt;
  &lt;img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif"&gt;
  </code></pre>
  
  <p>The image is about 1000px width which is extreme but it needs to be. The problem is that it is only 52px width in Safari. It is correctly displaying in Chrome, Firefox, Opera and even in IE. I have been looking the entire evening for Safari hacks but everything I find also changes the output in the Chrome browser. When I remove the width 100% or basically the style part then it shows the entire image as it should in safari. But then it will no longer be responsive. Any help would be greatly appreciated.</p>
  
  <p>I have added the following to the style part above. Which makes it work but it is an ugly hack so I still would like to know how to do it properly.</p>
  
  <p>This is the new code. I have used the screensizes from <a href="http://www.websitedimensions.com/" rel="nofollow">http://www.websitedimensions.com/</a></p>
  
  <pre><code>&lt;style&gt;
  @media screen and (min-width:310px) {.browser_logo{min-width:310px;}}
  @media screen and (min-width:468px) {.browser_logo{min-width:468px;}}
  @media screen and (min-width:750px) {.browser_logo{min-width:750px;}}
  @media screen and (min-width:989px) {.browser_logo{min-width:989px;}}
  @media screen and (min-width:1010px) {.browser_logo{min-width:1010px;}}
  @media screen and (min-width:1117px) {.browser_logo{min-width:1117px;}}
  @media screen and (min-width:1245px) {.browser_logo{min-width:1245px;}}
  @media screen and (min-width:1405px) {.browser_logo{min-width:1405px;}}
  @media screen and (min-width:1645px) {.browser_logo{min-width:1645px;}}
  @media screen and (min-width:1885px) {.browser_logo{min-width:1885px;}}
  }
  &lt;/style&gt;
  &lt;img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif"&gt;
  </code></pre>