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: enter image description here enter image description here

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: enter image description here



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>

    CSS Howto..

    How do I move this label inside my textarea?

    how to add bootstrap, css, images ,js into google app engine?

    Angularjs - How to have same height for the child divs when one child div's size is increased dynamically with ng-repeat

    How to format an arabic poem using jquery?

    How would you switch focus to an input text upon clicking an item on a dropdown menu?

    How to design a cross client / browser compatible email?

    Odd visual effect (little line shows) when hovering over button in browser

    How to disable Cufon on certain elements?

    How to Create paragraph first letter uppercase in html & css (in special format)

    How do I fit a fieldset to the size of its content with CSS?

    How to make an text float next to an image in HTML/CSS?

    How to add an existing class to td in css file?

    How apply CSS to browse button

    How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files

    How to set background gradient css via javascript [duplicate]

    show,hide DIV with mouseover , mouseout

    How do I add CSS font styles to PHP echos?

    tooltip box not showing using css

    How to pause css animation at orginal state

    How to keep floated element from affecting “text-align: center” text?

    How do I put my content in a box?

    How can i learn CSS easily?

    How to have proper spacing between items in the navbar regardless of word size?

    CSS: How to blur background image within the div?

    How to add css to dynamic div Id

    How to dynamically change CSS class of DIV tag?

    How to apply rounded borders to highlight/selection

    How is BBC changing colours based on temperature? CSS?

    how to link stylesheet in css

    How to create transparent text on non-transparent background