2

I use percent(%) in div width to wrap the image but the problem is every browser render it differently any suggestion why this happen. by the way firefox work perfectly but in safari, chrome and opera don't work the way that i want.

if possible can you give brief explanation why this happen!!

thank you in advance.....

below is the image show the problem:

enter image description here

html:

<div class="banner">
      <div class="divWrap">
        <div class="imageWrap noMarginLeft"><a href="#"><img src="images/130410_Project-tile1.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile2.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile3.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile4.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile5.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile6.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile7.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginLeft"><a href="#"><img src="images/130410_Project-tile8.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile9.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile10.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile11.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile12.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile13.jpg" alt="" /></a></div>
        <div class="imageWrap"><a href="#"><img src="images/130410_Project-tile14.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginLeft noMarginBottom"><a href="#"><img src="images/130410_Project-tile15.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginBottom"><a href="#"><img src="images/130410_Project-tile16.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginBottom"><a href="#"><img src="images/130410_Project-tile17.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginBottom"><a href="#"><img src="images/130410_Project-tile18.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginBottom"><a href="#"><img src="images/130410_Project-tile19.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginBottom"><a href="#"><img src="images/130410_Project-tile20.jpg" alt="" /></a></div>
        <div class="imageWrap noMarginBottom"><a href="#"><img src="images/130410_Project-tile21.jpg" alt="" /></a></div>
      </div>  

    </div><!-- end banner -->

css:

.banner{
  float:left;
  width:100%;
}
.banner .imageWrap {
  float:left;
  width:13.772%;
  margin:0 0 0 .6%;
  background-color:#555
}

.banner .imageWrap img {
  float:left;
  max-width:100%;
  width:100%;
}

.noMarginLeft {margin-left:0 !important}
.noMarginBottom {margin-bottom:0 !important}
jhunlio
  • 2,550
  • 4
  • 26
  • 45
  • 1
    In that screenshot, are the browsers the same width......? – bozdoz Apr 17 '13 at 04:18
  • Try to add `position:relative` to `.banner`, `.imageWrap` and `.imageWrap img`. – Passerby Apr 17 '13 at 04:23
  • give to live link or create a fiddle – Rohit Azad Malik Apr 17 '13 at 04:24
  • I update the image with same width – jhunlio Apr 17 '13 at 04:27
  • do you use a reset stylesheet ? if not, then you should, otherwise you will always run into the problem that different browsers have different defaults for the element. (e.g. some browsers have border or padding for images in a link, others don't) especially if you use `%` width it will be easyer if all browsers have the same settings. – t.niese Apr 17 '13 at 05:04
  • Why so many `float: left`s? It makes sense on the `.banner .imageWrap`, but on all the other things, I don't see the point. – icktoofay Apr 17 '13 at 05:04

1 Answers1

4

Browsers round percentage widths differently.

Here's an article on it from 2008 (but still relevant today):

http://robertnyman.com/2008/01/24/how-web-browsers-handle-rounding-when-it-comes-to-values-set-in-percentage/

adnrw
  • 1,038
  • 6
  • 13