Firefox CSS height issue
Question
So I have this table http://mikepuerto.com/iNews/ -
I'm using some jquery to sort it. If you view this in any browser but firefox you will see that the table headers have a shadow running along the bottom and when you click a header an arrow points down to indicate that you are sorting that column... For some reason firefox does not show the shadow and does show the arrow properly... I have narrowed it down to something to do with the height on the "th". With the height and padding on the following style it works fine on most other browsers... It only works in FF if i set the height to 69px; Any ideas as to why this would happen?
table.interactiveData thead tr th {
color: #fff;
font-size: 10px;
font-weight: bold;
padding: 0 7px 16px 7px;
height: 54px;
}
3 answers
solution1
2 ACCPTED
Looks like in FF it is the first table row after the th that is covering it up.
You could fix by making the first row of the table to not have a background color and add a margin to the top of it maybe. Taking a look now.
The height really should be 70px since that is the height of the background image. Padding is not having an effect in FF. In FF the tabs look good, then in the other versions you just need to make sure the background is white.
Change your css in the page to this padding-bottom and padding-top is just not working in FF due to all the other styles.
#slim {
width: 580px;
margin: 0 auto;
}
/* tables */
table.interactiveData {
font-family: "Lucida Grande", "Tahoma", "Franklin Gothic Medium", "Arial", Sans-serif;
background-color: ;
margin:10px 0pt 15px;
font-size: 10px;
width: 100%;
text-align: left;
border: 1px solid #dbdbdd;
}
table.interactiveData thead tr {
cursor: pointer;
background: url(http://mikepuerto.com/iNews/images/thead-bg.jpg);
}
table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
}
table.interactiveData tbody td {
padding: 7px;
vertical-align: middle;
}
table.interactiveData td.even {
}
table.interactiveData tr.odd {
background-color: #f3f3f3;
}
table.interactiveData td.sortedeven {
background-color:#edf8fa;
}
table.interactiveData td.sortedodd {
background-color:#edf1f2;
}
table.interactiveData thead tr th {
color: #fff;
font-size: 10px;
font-weight: bold;
height: 70px;
padding-left: 5px;
padding-right: 5px;
}
Specifically the #fff as the background color to override the red.
table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
}
And then set it to 70px height and only set a left and right margin. If you want to pad top and bottom you will have to wrap them in a span or go another route.
table.interactiveData thead tr th {
color: #fff;
font-size: 10px;
font-weight: bold;
height: 70px;
padding-left: 5px;
padding-right: 5px;
}
Works in FF, Chrome, IE and Safari now.
Full markup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
tables $(document).ready( function() { $("#interactiveData").tablesorter({widgets: ['zebra','columnHighlight']}); }
);
</script>
<link rel="stylesheet" href="styles.css" />
<style>
#slim {
width: 580px;
margin: 0 auto;
}
/* tables */
table.interactiveData {
font-family: "Lucida Grande", "Tahoma", "Franklin Gothic Medium", "Arial", Sans-serif;
background-color: ;
margin:10px 0pt 15px;
font-size: 10px;
width: 100%;
text-align: left;
border: 1px solid #dbdbdd;
}
table.interactiveData thead tr {
cursor: pointer;
background: url(http://mikepuerto.com/iNews/images/thead-bg.jpg);
}
table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
}
table.interactiveData tbody td {
padding: 7px;
vertical-align: middle;
}
table.interactiveData td.even {
}
table.interactiveData tr.odd {
background-color: #f3f3f3;
}
table.interactiveData td.sortedeven {
background-color:#edf8fa;
}
table.interactiveData td.sortedodd {
background-color:#edf1f2;
}
table.interactiveData thead tr th {
color: #fff;
font-size: 10px;
font-weight: bold;
height: 70px;
padding-left: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<div id="slim">
<table id="interactiveData" class="interactiveData" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Rank</th>
<th>Broker-Dealer</th>
<th>Website</th>
<th>Discretionary Assets</th>
<th>Discretionary Assets 2007</th>
<th>Difference in Discretionary Assets 2007-2009</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>data2b
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>1</td>
<td>data4d</td>
<td>data5e</td>
<td>data5e</td>
</tr>
<tr>
<td>2</td>
<td>
data1f
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data2g</td>
<td>data3h</td>
<td>data4i</td>
<td>data4i</td>
</tr>
<tr>
<td>3</td>
<td>data2l
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data3m</td>
<td>data4n</td>
<td>data5o</td>
<td>data5o</td>
</tr>
<tr>
<td>4</td>
<td>data2q
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data3r</td>
<td>data4s</td>
<td>data5t</td>
<td>data5t</td>
</tr>
<tr>
<td>5</td>
<td>data2q
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data3r</td>
<td>data4s</td>
<td>data5t</td>
<td>data5t</td>
</tr>
<tr>
<td>6</td>
<td>data2q
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data3r</td>
<td>data4s</td>
<td>data5t</td>
<td>data5t</td>
</tr>
</tbody>
</table>
</div>
</body>
solution2
1 2009-12-16 04:14:16
Try setting the
background-position:bottom:
on the table.interactiveData thead tr rule which follows the one you posted.
Edit: Also on the next rule you need that (or remove the centering that is there), so all together, this is what you need:
table.interactiveData thead tr {
cursor: pointer;
background: url(images/thead-bg.jpg);
background-position:bottom;
background-repeat:repeat-x;
}
table.interactiveData thead tr .headerSortDown,
table.interactiveData thead tr .headerSortUp {
background: url(images/thead-hover-bg.jpg) center bottom no-repeat;
/* changed to "center bottom", thanks Ryan */
}
solution3
0 2009-12-16 03:54:25
It's the padding that is handled differently. In Fx the padding on the header cells doesn't affect the size of the cell, so the height is the specified 54px.
Remove the height setting on the header cells, and specify the height 70px on the row instead.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.