HTML tables - getting rid of that gap between rowns

[crunkie]

Row spacing, go away, and never come back!

Hey all,

I can't for the life of me figure this one out.
I have an email. I have a table. I have a gap between two rows that I can't get rid of in IE.
I've googled it, tried many difference combinations, put tables within tables, then simplified it and remove thoss tables. No Css. No luck.

I'm also using DotMailer (if any of you are familiar with it) to upload the email to send out - and it adds its own bit of html which doesn't help (e.g. <td style="padding:0px;"etc).

Currently the biggest gap issue is between line 35 and 36 (though it's all rows once I've uploaded it to DotMailer).

Can anyone help pretty please? It's driving me mad! #badmonday

Zoë

<table cellpadding="0" cellspacing="0" align="center"  width="600" style="font-family: Arial,Helvetica,sans-serif; vertical-align:middle;">
    <tbody>
        <tr>
            <td style="font-size:10px; font-family:Arial, Helvetica, sans-serif;" align="center">
                <a style="color:#00B5E6" href="http://$CANTREAD$"><font style="font-family:Arial, Helvetica, sans-serif; font-size:10px">Click here to view online</font></a>
            </td>
        </tr>
        <tr>
            <td style="width: 600px;" bgcolor="#FFFFFF">
                <img src="xxxx" height="8" width="8">
            </td>
        </tr>
        <tr>
            <td style="background-color: #FFFFFF; width: 600px;">
                <table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
                    <tbody>
                        <tr>
                            <td width="600" height="235" colspan="2" style="padding:0px;" border="0">
                                <img src="xxx" height="235" width="600" style="vertical-align:bottom;">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="background-color:#002046; font-family:Arial, Helvetica, sans-serif; font-size: 14px; color:#FFFFFF; padding:18px;">
                                <strong>One size doesn't fit all... there is no formula for the perfect contact centre agent; it all depends on the function they're performing.</strong><br>
                                <br>
                                You can train people with scripts and processes but the most successful contact centres use agents who are naturally skilled at, and motivated by, the service they perform.<br>
                                <br>
                                Our products identify a candidate's talent and motivation for different tasks, recognising the candidates who will perform best in the function you need.
                            </td>
                        </tr>
                        <tr>
                            <td width="600" height="11" colspan="2" style="padding:0px;" border="0"><img src="xxxxx" height="11" width="600" style="vertical-align:top;"></td>
                        </tr>
                    </tbody>
                </table>
                <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="vertical-align:top; border-collapse:collapse;"><tbody><tr><td width="62%" style="background-color:#00B5E6; color: #FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size: 14px; padding:18px; vertical-align:top;"><strong>Contact us about your contact <br>centre recruitment:</strong><br><br><strong>Tel:</strong> +44 (0)20 xxx<br><strong>Email:</strong> <a style="color:#FFF; text-decoration:none" href="#">xxxx</a><br><strong>Web: </strong><a style="color:#FFF; text-decoration:none" href="#" title="Click to find out more">www.example.com</a></td><td width="38%" style="background-color:#00B5E6;"><img src="xxxx" height="25" width="192"></td></tr></tbody></table>
                        <tr>
                            <td colspan="2" style="background:#FFF; width: 600px;">
                                <img src="xxxx" height="8" width="8">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="width: 600px; font-size:10px" align="center"><a style="color:#00B5E6" href="http://$UNSUB$">
                                <font style="font-family:Arial, Helvetica, sans-serif; font-size:10px">Click here to unsubscribe</font></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

[iamthwee]

If you don't want the space Why not just have the whole thing as ONE table.

[Violet_82]

Hi,
the gap is there because both the td and the image have a height:

<td width="600" height="11" border="0" style="padding:0px;" colspan="2">
<img width="600" height="11" style="vertical-align:top;" src="xxxxx">
</td>

Now, this tr

<tr>
<td width="600" height="11" border="0" style="padding:0px;" colspan="2">
<img width="600" height="11" style="vertical-align:top;" src="xxxxx">
</td>
</tr>

to me doesn't look like is doing anything in there, and if that is the case I would remove it completely from your html, resulting in the gap to disappear. Alternativey you could reduce both the height to 0.

Now, let's get to the most important part. Is there a reason why you are using tables? Tables should be used only for tabular data and the info on the page I am afraid it isn't tabular data, so it shouldn't be in the table. Clearly the table is used for layout in this instance. I suggest you review your code and use a different approach (using divs is much better and clearer) unless of course there is a specific reason why you have to use tables (for example it is somebody else's code and you can't change it). Also, I hope your inline styles are used just for demonstration purposes because really they belong to a css file.
Hope this helps.

[iamthwee]

She's using tables for email.

http://jsfiddle.net/d2JvH/

Looking at her layout I was curious to know why she needs to nest tables. One table should suffice. Layout looks pretty simple.

To the OP are you using a table builder such as dreamweaver or Microsoft frontpage?

[crunkie]

Thanks for the replies.

Violet 82 - As iamthwee said, it's for email. Otherwise I would def be using divs and css don't worry!

iamthwee - So the original code I was give (indeed it's not mine) had tables within tables within tables. I removed them all to make it one table like, but was still having the gap, so tried with another nested table (which is the code I showed above).

The reason I've set heights is because there is an image in them (though I haven't provided the link as I don't think I'd be allowed to, hence the <img src="xxxxx">. So where the td height it "11", I have an image 11pixels high and wanted to double make sure the cell was the height I wanted it to be.

Am using Dreamweaver but I know html (to a certain extent) so am writing/editing it myself (not a massive fan of dreamweaver table building), then uploading to DotMailer.

I'll try again keeping it in just one table and get back to you with the code.

[Violet_82]

ah ok, sorry crunkie, I didn't mean to patronise or anything. I suppose this shows the very low level of experience I have with html emails!

[JorgeM]

You dont need to have a height on the table cell or the attributes you assigned. For the image, simply add display:block, with a margin:0 style to your image. It will remove that extra gap.

<td>
  <img src="xxxxx" width="600" height="11" style="display:block;margin:0">
</td>

You can validate this by removing the height attribute on that image and you will see the two tables come together. So with this change, you'll have the 11 pixels for your image to fill.

Happy Coding!

[crunkie]

No worries Violet 82, it's not always easy to know who knows what on forums. I'd say avoid html emails where you can - they're headaches, give me css any day ;)

simply add display:block, with a margin:0 style to your image.

JorgeM - that did it! Thank you. I hadn't thought about adding that to the img tag. See, so simple.

Thanks all!

[JorgeM]

Everything is simple once you figure it out. Good to hear it resolved your problem.