CODEWITHSUNDEEP
htmlcss
Guybrush
Guybrush

Reputation: 1611

Image tag with strange behavior on Chrome

I have an old but simple html/css page with a barcode, that is generated by an ASP script. The problem is the barcode has different appearence on Internet Explorer and Chrome. The html/css code is very simple, still I can't understand what is going on. Already tried some modifications, without sucess. :(

For generating the bar code I have 2 gif images:

enter image description here

And the HTML/CSS is simple as this:

<style type="text/css">
    img.barcode {
        border: 0;
        padding: 0;
        margin: 0;
    }
</style>

<tr>
    <td width="659" colspan="2" style="background-color:#FFFFFF;">
        <img src="imagens/p.gif" class="barcode" style="width:1px;height:50px;"><img
        src="images/b.gif" class="barcode" class="barcode" style="width:1px;height:50px;"><img
        src="images/p.gif" class="barcode" style="width:1px;height:50px;"><img
        src="images/b.gif" class="barcode" style="width:1px;height:50px;"><img
        src="images/p.gif" class="barcode" style="width:1px;height:50px;"><img
        src="imagens/b.gif" class="barcode" style="width:3px;height:50px;"><img
        src="images/p.gif" class="barcode" style="width:3px;height:50px;"><img

        ...

        src="imagens/b.gif" class="barcode" style="width:3px;height:50px;"><img
        src="images/p.gif" class="barcode" style="width:3px;height:50px;"><img
        src="imagens/b.gif" class="barcode" style="width:3px;height:50px;"><img
        src="images/p.gif" class="barcode" style="width:1px;height:50px;"><img
        src="imagens/b.gif" class="barcode" style="width:1px;height:50px;"><img
        src="images/p.gif" class="barcode" style="width:3px;height:50px;"><img
        src="images/b.gif" class="barcode" style="width:1px;height:50px;"><img
        src="images/p.gif" class="barcode" style="width:1px;height:50px;">
    </td>
</tr>

In Internet Explorer it works perfecty:

enter image description here

But in Google Chrome I have this:

enter image description here

Please, anyone knows what is going on and how to solve?

Thanks!!

Upvotes: 1

Views: 131

Answers (3)

hungerstar
hungerstar

Reputation: 21685

FWIW, here's a CSS only approach using flexbox.

.barcode {
  display: flex;
}
.barcode > div {
  width: 1px;
  height: 50px;
  background-color: black;
}
.barcode .lg {
  width: 3px;
}
.barcode .invert {
  background-color: white;
}
<div class="barcode">
  <div></div>
  <div class="invert"></div>
  <div></div>
  <div class="invert"></div>
  <div class="lg"></div>
  <div class="invert lg"></div>
  <div></div>
  <div class="invert"></div>
  <div></div>
  <div class="invert"></div>
  <div></div>
  <div class="invert"></div>
  <div></div>
  <div class="invert"></div>
  <div class="lg"></div>
  <div class="invert lg"></div>
  <div></div>
  <div class="invert"></div>
  <div></div>
  <div class="invert"></div>
  <div></div>
  <div class="invert"></div>
  <div class="lg"></div>
  <div class="invert lg"></div>
  <div></div>
  <div class="invert"></div>
  <div></div>
  <div class="invert lg"></div>
  <div class="lg"></div>
  <div class="invert"></div>
  <div></div>
</div>

Every DIV is a bar. Then just define if the bar needs to be "inverted" (white) and/or thicker.

Upvotes: 0

SsJVasto
SsJVasto

Reputation: 496

Chrome is displaying the "Image not found" image, while IE doesn't show anything. Your b.gif is not in imagens/, it is in images/

Upvotes: 3

Amir H. Bagheri
Amir H. Bagheri

Reputation: 1426

Change your style to this:

<style type="text/css">
    td {
       font-size: 0; /* there would be no spacing when images are rendered. */
    }
    img.barcode {
        border: 0;
        padding: 0;
        margin: 0;
        display: inline-block; /* Chrome default is inline */
        vertical-align: top; /* ensure that all images stand at the top. */
    }
</style>

Upvotes: 0

Related Questions