Vertically align <th> in IE
Question
I'm trying to make the text in the <th> column align to the top of the row. With vertical-align: top; It works in every browser but IE (I'm most worried about IE9 support).
HTML
<tr class="three">
<th>
Header</th>
<td class="divider">
</td>
<td class="first">
<ul>
<li><img src="images/icon.jpg" alt="A5 chip" width="81" height="91" /></li>
<li>Text</li>
</ul>
</td>
</tr>
CSS
img {vertical-align: top;}
.compare-table tr th {
padding-top: 20px;
padding-left: 5px;
width: 165px;
line-height: 1.5em;
}
I'm not sure what other elements of the code are relevant. The page can be viewed here .
I apologise if this question is not self-contained, or well explained.
4 answers
solution1
0 2012-11-02 06:05:41
I am not sure about the issue as it could have been more explained. But, as far as issue is concerned with the rendering of CSS in IE I would suggest to ponder upon a JS library ---> excanvas. This not only helps most of the rendering of CSS in IE but also helps to render CSS3 elements and HTML5 elements in IE. Revert Back incase some help is needed.
solution2
0 2012-11-02 07:35:44
The order of the list items is not correct. Place the <li>tekst</li> above the <li><img src="images/icon.jpg" alt="A5 chip" width="81" height="91" /></li> .
solution3
0 2012-11-02 07:43:49
It works fine in IE9. My guess is that your doctype is kind of messed up since it makes IE browsers to render the page using IE7 standards and compatibility view right now.
Try to change it to html5:
<!DOCTYPE html>
or html4 transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Or tell IE to render the page using the latest IE standard view by placing <meta http-equiv="X-UA-Compatible" content="IE=edge"> into page's head tag.
But before that try to get rid of two empty lines before your doctype declaration, IE might switch to a quirks mode if there's something before doctype declaration. I know for a fact that it happens if you put comments before doctype, might be the same issue with leading whitespace.
solution4
0 2012-11-02 08:57:16
Forget tr & td . To get a better look always use div . It works on all browser.
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.