HTML/CSS issues
I had a table on a site on one web host and it looked fine, now I moved to another host and the table is screwed up
HTML:
<div class="right">
<table>
<tbody>
<tr>
<tdcolspan="3">
<img alt="" src="../App_Themes/image1.png">
</td>
</tr>
<tr>
<td>
<img alt="" src=开发者_开发百科"../App_Themes/image2.png">
</td>
<td>
<iframe class="iframe" scrolling="no" frameborder="0" allowtransparency="yes" src="site.com">
Your browser does not support iframes
</iframe>
</td>
<td>
<img alt="" src="../App_Themes/image3.png">
</td>
</tr>
<tr>
<td colspan="3">
<img alt="" src="../App_Themes/image4.png">
</td>
</tr>
</tbody>
</table>
</div>
What's happening is that there's a (approx) 2px gap between the rows and I can't understand why, I tried with the following CSS but with no luck:
.right tr td {padding: 0; margin:0px;}
.right tr {border-spacing: 0px; padding:0px; margin:0px;}
The images forms a border around the iframe and image 1 is 2px above 2 and 3, image 4 is 2px below image 2 and 3.
How can something simple like this break just because I move to another host?
I'm not sure how switching hosts changed anything, but I think I can solve your problem.
First off, fix <tdcolspan="3">
to <td colspan="3">
. That's not the cause, but it's not good either.
Try adding this CSS:
table img {
display: block
}
Or this:
table img {
vertical-align: top
}
I think you're facing the same issue as in these questions:
- CSS problem - gaps between divs
- Why does Opera 9 have a space between these two images?
- html5 vertical spacing issue with <img>
See here for a document providing extended detail on the issue:
- https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps
Try adding this to your CSS:
table { border-collapse: collapse; }
Could be that you went from windows machine to linux machine or vica versa and the different line-ending is causing the different behavior.
Windows uses CRLF and Linux uses LF I think.
Possible solutions - convert the line endings in a good text editor to match server platform, otherwise, delete all the newline/whitespace between your TR tags to check if this is causing an issue.
精彩评论