CODEWITHSUNDEEP
cssgoogle-chrome
Raj
Raj

Reputation: 22926

Elements with same CSS display differently in Chrome

I have two div elements as shown below. First one exists when the page loads, the second one gets added from jQuery.

Live preview - http://jsfiddle.net/emaillenin/dhtgX/1/ (Try checking out this in Firefox and Chrome)

<div class="krc_item">
  <span>
    <img class="cart_pimg ui-draggable" src="xxx">
  </span>
  <div id="krc_item_qty_763" class="krc_item_qty">
    1
  </div>
</div>
<div class="krc_item">
  <span>
    <img class="cart_pimg ui-draggable" src="xxxx">
  </span>
  <div id="krc_item_qty_918" class="krc_item_qty">
    1
  </div>
</div>

The following are the relevant CSS:

.krc_item {
 float: right;
 padding-top: 3px;
 width: 70px;
}

img.cart_pimg {
 width: 50px;
 height: 50px;
}

.krc_item_qty {
 height: 12px;
 position: relative;
 text-align: right;
 top: 35px;
 right: 35px;
 background-color: #FFFFFF;
 border-color: #5A224D;
 border-radius: 14px 14px 14px 14px;
 border-style: solid;
 border-width: 1px;
 color: #000000;
 float: right;
 font-size: 10px;
 font-weight: bold;
 padding: 2px 5px;
 z-index: 100;
 line-height: 12px;
}

Though the two DIV are structurally same, why they are displayed differently. This issue occurs only in Chrome. Firefox displays it correctly. If I change the top property to 0, the output in Chrome is this:

enter image description here

Usual Firefox output (if top is 35px):

enter image description here

Whats the CSS issue here?

Upvotes: 0

Views: 225

Answers (1)

AAA
AAA

Reputation: 2032

Try setting krc_item to position:relative, then use position:absolute for krc_item_quantity. You will probably have to adjust the positioning after doing so.

Upvotes: 1

Related Questions