0
У меня есть таблица с заголовками, и каждый заголовок содержит диапазон, который имеет фоновое изображение, которое я использую в качестве сператора между th.IE7 отображает заголовки таблиц по-разному
На всех браузерах он отображается как должен, но на IE7 изображение скепера (которое представляет собой пролет с фоном) показывает на дне.
Хорошо (IE8 +, Chrome, FF):
Bad (IE7):
HTML:
<div class="tableWrapper">
<table>
<thead>
<tr>
<th class="sortable top-left-round"><a href="#" class="sortable">Lead Id</a><span></span></th>
<th class="sortable"><a href="#" class="sortable">Create Date</a><span></span></th>
<th class="sortable"><a href="#" class="sortable">Target Group</a><span></span></th>
<th class="sortable"><a href="#" class="sortable">Activity</a><span></span></th>
<th class="sortable"><a href="#" class="sortable">Type</a><span></span></th>
<th class="sortable"><a href="#" class="sortable">Last Update</a><span></span></th>
<th class="sortable"><a href="#" class="sortable">Close Date</a><span></span></th>
<th class="action_header_short top-right-round"><span>View</span></th>
</tr>
</thead>
<tbody>
<tr class="first">
<td>1</td>
<td class="col_name" title="Jackson">10/12/2011</td>
<td title="Jackson">Jackson</td>
<td title="Jackson">Jackson </td>
<td title="Jackson">Jackson</td>
<td title="Jackson">10/12/2011</td>
<td title="Jackson">10/12/2011</td>
<td class="action"><a href="#" class="view-btn"></a></td>
</tr>
<tr>
<td>1</td>
<td class="col_name" title="Jackson">10/12/2011</td>
<td title="Jackson">Jackson</td>
<td title="Jackson">Jackson </td>
<td title="Jackson">Jackson</td>
<td title="Jackson">10/12/2011</td>
<td title="Jackson">10/12/2011</td>
<td class="action"><a href="#" class="view-btn"></a></td>
</tr>
</tbody>
</table>
</div>
<!-- end .tableWrapper -->
CSS:
table{
width: 890px;
margin-left: 25px;
border-collapse:collapse;
}
td{
border: 1px solid #99a3a7;
}
.top-left-round{
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 5px 0px 0px 0px;
border-radius: 5px 0px 0px 0px;
}
.top-right-round{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 5px 0px 0px;
border-radius: 0px 5px 0px 0px;
}
table thead th{
background: url(../images/table-header-bg.png) repeat-x;
height: 42px;
line-height: 40px;
border: 0px solid transparent;
font-weight:normal;
}
th.action_header span {
margin-right:50px;
}
th.action_header {
width: 120px;
text-align: left;
padding-left: 20px
}
th.action_header_short{
padding-left: 20px;
}
th a.sortable,th.action_header span,th.action_header_short span {
color: #fff;
font-size: 15px;
font-weight: normal;
text-decoration: none;
}
th a.sortable{
padding: 0 15px;
background: url(../images/icons/arrow_dwn.png) right center no-repeat;
}
th.sortable span{
background: url(../images/cols-seperator.png) right top no-repeat;
float:right;
margin-right: -2px;
width:5px;
height: 42px;
}
th a:hover{
color: #fff;
}
tbody td{
padding: 0 5px;
}
td.action{
width:74px;
padding: 2px;
}
.tableWrapper{
border-bottom: 1px solid #E5E5E5;
padding-bottom: 8px;
}
Почему вы не можете просто создать заголовок с помощью CSS? Кажется довольно глупым использовать изображение с фоном и некоторыми строками. – Bojangles
Я принял ваш совет и просто написал его с помощью простого CSS для IE7. Благодарю. – Tomer