Wednesday, January 11, 2012

Table row background repeats in columns for Google Chrome & IE7

          While working with tables, I struck with a css issue in table row background in Google Chrome & in Internet Explorer 7, no issue in other browsers (Firefox, Internet Explorer 8 & 9). If we specify a background image for a row (tr), it will repeats in every columns(td or th) in that row. The issue as the image:








     By Googling and using some tricks, I can fix this issue (thanks God) in both browsers. The initial HTML and CSS as:
<table cellspacing="0" cellpadding="0" class="bidTable">
           <tbody>
        <tr class="bidHeader">
               <th id="category">Category</th>
               <th id="minBid">Min Bid</th>
               <th id="highBid">High Bid</th>
           </tr>
           <tr>
               <td class="cat">Test Category </td>
               <td class="min-bid">$0 </td>
               <td class="high-bid">$13 </td>
           </tr>
       </tbody>
</table>



.bidTable tr {
    background: url("../images/bid_bottom.png") no-repeat scroll 0 0 transparent;
    height: 53px;
    width: 464px;
}


.bidTable tr.bidHeader {
    background: url("../images/bid_header.png") no-repeat scroll 0 0 transparent;
    height: 45px;
    width: 464px;
}

.bidTable th {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
}

.bidHeader #category {
    padding-left: 20px;
    text-align: center;
    width: 260px;
}

.bidHeader #minBid {
    width: 92px;
}
.bidHeader #highBid {
    width: 92px;
}



For other browsers it seen as:








   For Google Chrome, I have to use use the CSS hack. The issue is fixed by adding  display: inline-table; for both td & th. But I have to do extra css to keep the alignment. The CSS is like this:


/* for google crome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .bidTable td, .bidTable th {
      display: inline-table;
      height: 9px;
      padding: 12px 0 0 0;
  }
  .bidHeader #category, .bidTable .cat{
      width: 267px;
      padding-left: 20px;
      text-align: center;
  }
  .bidHeader #minBid, .bidTable .min-bid{
      width: 73px;
  }

  .bidHeader #highBid, .bidTable .high-bid{
      width: 78px;
  }
}



For IE7, also used the CSS hack, for tr added position: relative; and for th & td added background: none; like this.

  /* for IE 7 */
  *+html .bidTable tr {
      position: relative;
      padding: 0;     
  }
  *+html .bidTable th {
      background: none;     
  }
  *+html .bidTable td {
      background: none;     
  }




     


2 comments:

  1. Great thing I had the same problem in a project and could solve it with your advice. Thanks

    ReplyDelete
  2. đồng tâm
    game mu
    cho thuê nhà trọ
    cho thuê phòng trọ
    nhac san cuc manh
    số điện thoại tư vấn pháp luật miễn phí
    văn phòng luật
    tổng đài tư vấn pháp luật
    dịch vụ thành lập công ty trọn gói
    thương lượng
    thuyết mbp
    erg là gì
    nổi tiếng
    chi square
    nói chuyện trước công chúng
    định lý
    victor vroom
    chiến thắng con quỷ
    điểm cân bằng

    “Đại sư tôn hôm nay tâm tình có lẽ không được tốt cho lắm !” Lưu Phong đối với tiếng tiêu này rất đỗi quen thuộc, mỗi lần đại sư tôn của hắn có tâm trạng không tốt đều một mình đến Vân Mộng sơn, dùng tiếng tiêu tĩnh tâm.Mà Lưu Phong chính là người thưởng thức tiếng tiêu của sư tôn hắn. Trong ba năm qua hắn chính là người duy nhất có diễm phúc này.

    Xuyên qua một bãi cỏ, nhân ảnh của đại sư tôn Tần Thủy Dao đã hiện ra trứơc mắt hắn.Nàng đang đứng trên một tảng đá bên cạnh là một thủy đàm.Một thân bạch y làm nổi bật lên phong cách cao quý, mái tóc dài đen tuyền buông xõa tựa như một dòng suối, phủ xuống tấm thân thanh mảnh, dáng vóc toát lên vẻ yểu điệu tú lệ, ngũ quan ưu nhã tinh xảo. Đích thực là một tuyệt sắc giai nhân.

    “Thực là vưu vật của tạo hóa!” Lưu Phong trong đầu khẽ thốt lên như vậy, hắn chỉ dám nghĩ chứ không dám nói ra.Nếu nói ra không chừng đại sư tôn sẽ biến hắn trở thành thái giám.
    Lưu Phong tiến gần đến thủy đàm, mặc cho những giọt sương đêm rớt xuống. Hắn muốn tận hưởng cảm giác lạnh lẽo nhưng khoan khoái này.

    “Phong nhi, ngươi đến rồi ư? Ngươi từ tiếng tiêu của ta có thể cảm ngộ được điều gì chăng?”

    “Đại sư tôn, đồ nhi ngu muội, thật sư không thể cảm nhận được tâm tình của người trong đêm nay.” Lưu Phong vốn không hề nói dối. Tiêu âm của Tần Thủy Dao hôm nay quả thật rất kỳ quái, khi thì hoan hỉ vui mừng, khi thì bi phẫn thống nộ.Quả thực là khó đoán được tâm trạng của nàng.

    “Có lẽ đúng là như vậy, ta hôm nay tâm trạng quả là có chút bấn loạn.” Tần Thủy Dao thở dài, đoạn đột nhiên hỏi:

    - Phong nhi, năm nay ngươi đã bao nhiêu tuổi rồi? Hai mưoi lăm tuổi hay mừơi tuổi.

    Lưu Phong không vội trả lời mà trầm ngâm suy nghĩ.Ba năm trước khi hắn mở mắt ra tại thế giới này, khi đó sư tôn của hắn nói hắn đã hôn mê suốt một năm.Khi đó hắn mới mười tuổi, vậy thì bây giờ hắn đã mừơi ba tuổi.

    “Sư tôn, đồ nhi đã mười ba tuổi.” Lưu Phong thận trọng trả lời, hắn trong lòng cảm thấy rất kỳ quái.Hiển nhiên sư tôn biết rõ tuổi của hắn, như thế nào hôm nay lại hỏi hắn như vậy?

    “Mười ba tuổi!Phong nhi đã trưởng thành, ta cũng đã già!” Tần Thủy Dao khẽ lên tiếng, giọng nói tựa hồ chứa đựng một nỗi buồn trong lòng.

    ReplyDelete