CODEWITHSUNDEEP
htmlcssimagecross-browser
MMMMS
MMMMS

Reputation: 2201

img tag width height issue in firefox

I have more img tag in my HTML code like below code,

    <div id="container" >
    <div>
        <img alt="Image1" id="Image1" src="" width="130px" height="90px" class="img">
         <input type="file" id="files1" class="fileUpload" name="files1[]" style="display:none" value="Select Image"> 
        <br>
        <br>
        <img alt="Image2" id="Image2" src="" width="130px" height="90px" class="img">
         <input type="file" id="files2" class="fileUpload" name="files1[]" style="display:none" value="Select Image"> 
        <br>
        <br>
        <img alt="Image3" id="Image3" src="" width="130px" height="90px" class="img">
         <input type="file" id="files3" class="fileUpload" name="files1[]" style="display:none" value="Select Image"> 
        <br>
        <br>
        <img alt="Image4" id="Image4" src="" width="130px" height="90px" class="img">
         <input type="file" id="files4" class="fileUpload" name="files1[]" style="display:none" value="Select Image"> 
        <br>
        <br>
        <img alt="Image5" id="Image5" src="" width="130px" height="90px" class="img">
         <input type="file" id="files5" class="fileUpload" name="files1[]" style="display:none" value="Select Image"> 
        <br>
        <br>
    </div>
</div>

Updated :

MyCSSsoFar.css

#container {
  width: 600px;
}

#container div {
  float: left;
  height: 300px;
  width: 300px;
}

when i run this on chrome its display with its width height like below image,

enter image description here

But when i run in firefox its not display with orginal width and height like below image,

enter image description here

I want to display with its width and height like chrome in all browser.How to fix this?

Upvotes: 2

Views: 3717

Answers (3)

Daniil Ryzhkov
Daniil Ryzhkov

Reputation: 7596

Heres is a option if you want to show default broken image icon (this also fixes your problem)

img{
    -moz-force-broken-image-icon:1;
}

Upvotes: 1

ketan
ketan

Reputation: 19341

Add following css:

.img{
    display:block;
    border:1px solid;
}

Check Fiddle here: Fiddle

Upvotes: 1

pbaldauf
pbaldauf

Reputation: 1681

I think you are missing the display: block property on your img-elements. By default the browser would add display: inline.

img {
    border: 1px solid red;
    display: block;
}

Here's a quick Fiddle.

Upvotes: 3

Related Questions