开发者

HTML/CSS issues

开发者 https://www.devze.com 2023-02-18 07:38 出处:网络
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

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号