1

I'm trying to set the width on a responsive image so it scales according to window size. It works in Chrome but not in Firefox, and now causes images to be misaligned. I've tried setting html and body elements to 100% as suggested here.

Check this link to see it live.

And here's the code in question (but check it live to be sure as it depends on the actual image sizes whether the UI breaks in FireFox):

HTML 

<div style="height: 300px;" class="product1">
    <div class="prodtitle">
        <span itemprop="name"><a title="Paxton And Percival Pig Pair" href="/weddingshop/party-supplies/52-11191697/paxton-and-percival-pig-pair">Paxton And Percival Pig Pair</a></span>
    </div>
    <div class="description">

        <center>
        <div class="image">
            <a href="/weddingshop/party-supplies/52-11191697/paxton-and-percival-pig-pair" title="Paxton And Percival Pig Pair"><img src="http://www.shindigz.com/images/itm_img/8F022D.jpg" alt="Paxton And Percival Pig Pair"></a>
        </div>
        </center>

        <span itemprop="description">These 3D Pigs are made of cardboard and are freestanding.&nbsp; Bandan...</span>
            <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
                <div class="price">
                    <span itemprop="priceCurrency" content="USD"></span><span itemprop="price" content="44.99">44.99</span>  
                </div>
            </div>
    </div>        


</div>

style

product1 {
    float: left;
    width: 100%;
    height: 100%;
    margin-bottom: 8px;
    border: 1px solid #EEE;
    min-height: 300px;
    background-color: #FFF;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) inset;
    position: relative;
}

.product1 .image a img {
    max-width: 100%;
    max-height: 178px;
}
Community
  • 1
  • 1
Adam
  • 6,041
  • 36
  • 120
  • 208
  • Can you post a piece of example code that demonstrates the issue? Preferable as a snippet here in the question. – Mr Lister Jan 22 '16 at 19:54
  • Anyway, your webpage has a lot of errors (223 according to the W3 validator; 161 according to my own parser which ignores the faulty DOCTYPE definition), so maybe it's just a matter of the different browsers using different methods of error correction. – Mr Lister Jan 22 '16 at 20:00
  • @MrLister: Thanks, I was unaware of those errors. But what is wrong with my DOCTYPE definition? – Adam Jan 22 '16 at 20:58
  • Sorry, I meant the DOCTYPE _declaration_, not definition. My bad. This is the one for a XHTML 1.0 file, while the file type and contents are HTML5. – Mr Lister Jan 23 '16 at 09:15
  • @MrLister: ah, thanks! I fixed that, but still Firefox is showing the page styled ugly....what else can it be? – Adam Jan 24 '16 at 05:04

0 Answers0