title: Iframe Size Issue on Firefox
body: <p>I have an iframe inside a list(I'm using a slider), and on Chrome sets its size perfectly, but on Firefox, it has a smaller size.</p>
  <p>It's like this</p>
  <pre><code>&lt;ul id=&quot;slider&quot;&gt;
      &lt;li&gt;&lt;iframe src=&quot;slider1-mobile.htm&quot; style=&quot;width:320px; height:250px;&quot;&gt;&lt;/iframe&gt;&lt;/li&gt;
      &lt;li&gt;&lt;iframe src=&quot;slider2-mobile.htm&quot; style=&quot;width:320px; height:250px;&quot;&gt;&lt;/iframe&gt;&lt;/li&gt;
      &lt;li&gt;&lt;iframe src=&quot;slider3-mobile.htm&quot; style=&quot;width:320px; height:250px;&quot;&gt;&lt;/iframe&gt;&lt;/li&gt;
      &lt;li&gt;&lt;iframe src=&quot;slider4-mobile.htm&quot; style=&quot;width:320px; height:250px;&quot;&gt;&lt;/iframe&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>With Firebug I can see that every li element have a size of 320x250 as stated on the css... but the iframe switches to width and height to 100%, even if I put it inline with the style attribute that I want them to be 320... anyways, even if it were to 100%, as the parent(the <code>&lt;li&gt;</code>) has a size of 320x250, the iframe having width to 100% should have a width of 320, as the 100% of 320 is 320.</p>
  <p>But it shows the iframe really small, not the size it should be. On Chrome I can view it perfectly.</p>
  <p>You can see it on:
  <code>http://samlizama.com/Responsive/</code></p>
  <p>I appreciate any help given :)</p>
  <p>Here's how it looks on Chrome and Firefox:</p>
  <p>Chrome
  <a href="https://i.stack.imgur.com/p387O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p387O.png" alt="On Chrome" /></a></p>
  
  <p>Firefox
  <a href="https://i.stack.imgur.com/abqma.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/abqma.png" alt="On Firefox" /></a></p>
  
  <p>With the same code</p>