Border display issue, not sure how to resolve

Tags: html,css,border

Problem :

Part of my web application has a issue with the outline of a section.

Currently this is happening:

Both pictures show the title having a space before it, and the second shows a space at the bottom. Occasionally these spaces aren't there, but in that case the bottom gets wonky still. The problem seems to be in the length of the titles, as shorter titles have the bottom overlapping problem and longer titles have the space problem, however, in all cases there is a space before the title at the top.

Here is the code that generate the sub-section (it is vbscript printing HTML):

    Response.Write "<!--BEGIN DATA SUB-SECTION TABLE************************************************************************************************************************-->" & chr(10)
    Response.Write "<table border='0' cellpadding='0' cellspacing='0' width='100%'>" & Chr(10)
    Response.Write "<tr>" & Chr(10)
    Response.Write "<td colspan=5>" & Chr(10)
    Response.Write "<!--BEGIN SUB-SECTION HEADER TABLE************************************************************************************************************************-->" & chr(10)
    Response.Write "<table border='0' cellpadding='0' cellspacing='0' width='100%'>" & Chr(10)
    Response.Write "<tr>" & Chr(10)
    Response.Write "<td width='5' height='9' align='left' valign='bottom'>" & Chr(10)
    Response.Write "<img border='0' src='"&strDirectory&"images/new_line_left.gif' width='4' height='10'></td>" & Chr(10)
    Response.Write "<td width='1%' align='left' nowrap><h2 class='fff'>"&Name&"</h2></td>" & Chr(10)
    Response.Write "<td class='fff'>&nbsp;</td>" & Chr(10)
    Response.Write "<td width='5' height='9' align='right' valign='bottom'>" & Chr(10)
    Response.Write "<img border='0' src='"&strDirectory&"images/new_line_right.gif' width='5' height='10'></td>" & Chr(10)
    Response.Write "</tr>" & Chr(10)
    Response.Write "</table></td>" & Chr(10)
    Response.Write "<!--END SUB-SECTION HEADER TABLE************************************************************************************************************************-->" & chr(10)
    Response.Write "</tr>" & Chr(10)

Now, what the coders who originally wrote this code wants to do is to write a series of exceptions to fix the problem, basically making the reusable code hard-coded to the values we already use. I hate this idea for obvious reasons, but because of my own inexperience with vbscript and HTML, I'm not sure how to go about fixing this.

Just in case anyone needs it, the css for the 'fff' class:

 td.fff {background:url("Maintenance/images/new_line_center.gif") repeat-x bottom;}

The new_line_center.gif is just the side border:

---

Solution :

The culprit is probably introducing the Chr(10) between the <td> and the image. I'd try removing that so the cell is rendered like this:

<td><img src="..." /></td>