Vertical line appears...why?

Discussion in 'CSS' started by chrisj, Aug 17, 2010.

0
  1. #1
    I'm using three horizontal boxes (see attached images) on a web page.
    When I add text to the middle box, a vertical line appears on the right side of the middle box. I added numbers in the text to show it's affect. When I add 1234 there is no vertical line (on the right side of the middle box), but when I add 5 (as in 12345), the annoying vertical line appears. Can you help me determine why I'm getting this vertical line and how I can eliminate it from happening?

    I've posted the Html and Css below. Thanks.

    Html:
    <tr><td class="tdma"></td></tr>
</br>

<tr><td class="quotes">

<table>
<tr><td>

<table>
<tr><td class="qbox1_tl"></td><td class="qbox1_tm"></td><td class="qbox1_tr"></td></tr>
<tr><td class="qbox1_ml"></td><td class="qbox1_m">
<font size="2" color="#E9C2A6" face="Arial">This is test text</font><font size="2" color="#ffffff" face="Arial"> This is test text. This is test text This is test text This is test text e of business, a location, and click View.
 This is test text This is test text This is test text This is test text This is test text This is test text.This is test text..
</font>
</td><td class="qbox1_mr"></td></tr>
<tr><td class="qbox1_bl"></td><td class="qbox1_bm"></td><td class="qbox1_br"></td></tr>
<tr><td></td><td class="qbox1_tail"></td><td></td></tr>
</table>

</td>

<td class="qbox_mid">

<table>
<tr><td class="qbox2_tl"></td><td class="qbox2_tm"></td><td class="qbox2_tr"></td></tr>
<tr><td class="qbox2_ml"></td><td class="qbox2_m">
<font size="3" color="#ffffff" face="Arial">Test Test Test this is also a test test text test test text text test this is 12345</font>
</td><td class="qbox2_mr"></td></tr>
<tr><td class="qbox2_bl"></td><td class="qbox2_bm"></td><td class="qbox2_br"></td></tr>
<tr><td></td><td class="qbox2_tail"></td><td></td></tr>
</table>

</td>

<td>

<table>
<tr><td class="qbox3_tl" ></td><td class="qbox3_tm"></td><td class="qbox3_tr"></td></tr>
<tr><td class="qbox3_ml"></td><td class="qbox3_m">
<font size="2" color="#cc6666" face="Arial">This is also test text</font><font size="2" color="#ffffff" face="Arial"> This is test text This is test text This is test text e of business, a location, and click View.
 This is test text This is test text This is test text This is test text This is test text This is test text.This is test text</font>
</td><td class="qbox3_mr"></td></tr>
<tr><td class="qbox3_bl"></td><td class="qbox3_bm"></td><td class="qbox3_br"></td></tr>
<tr><td></td><td class="qbox3_tail"></td><td></td></tr>
</table>

</td></tr></table>

</td></tr>
    Code (markup):
    CSS:
    td.quotes {
padding-top:15px;
}

td.qbox1_tl {
background:url(images/qbox1_tl.gif);
background-repeat:no-repeat;
background-position:top;
width:17px;
height:17px;
}

td.qbox1_tm {
background:url(images/qbox1_tm.gif);
background-repeat:repeat-x;
background-position:top;
height:17px;
width:275px;
}

td.qbox1_tr {
background:url(images/qbox1_tr.gif);
background-repeat:no-repeat;
background-position:top;
height:17px;
width:15px;
}

td.qbox1_ml {
background:url(images/qbox1_ml.gif);
background-repeat:repeat-y;
background-position:top;
width:17px;
height:174px;
}

td.qbox1_m {
background:url(images/qbox1_m.gif);
background-repeat:repeat;
background-position:top;
color:#ffffff;
width:275px;
}

td.qbox1_mr {
background:url(images/qbox1_mr.gif);
background-repeat:repeat-y;
background-position:top;
height:174px;
width:15px;
}

td.qbox1_bl {
background:url(images/qbox1_bl.gif);
background-repeat:no-repeat;
background-position:top;
width:17px;
height:20px;
}

td.qbox1_bm {
background:url(images/qbox1_bm.gif);
background-repeat:repeat-x;
background-position:top;
height:20px;
width:275px;
}

td.qbox1_br {
background:url(images/qbox1_br.gif);
background-repeat:no-repeat;
background-position:top;
width:15px;
height:20px;
}

td.qbox1_tail {
background:url(images/qbox1_b.gif);
background-repeat:no-repeat;
background-position:top;
height:46px;
}




td.qbox2_tl {
background:url(images/qbox2_tl.gif);
background-repeat:no-repeat;
background-position:top;
width:17px;
height:17px;
}

td.qbox2_tm {
background:url(images/qbox2_tm.gif);
background-repeat:repeat-x;
background-position:top;
width:275px;
height:17px;
}

td.qbox2_tr {
background:url(images/qbox2_tr.gif);
background-repeat:no-repeat;
background-position:top;
width:16px;
height:17px;
}

td.qbox2_ml {
background:url(images/qbox2_ml.gif);
background-repeat:repeat-y;
background-position:top;
width:17px;
height:174px;
}

td.qbox2_m {
background:url(images/qbox2_m.gif);
background-repeat:repeat;
background-position:top;
color:#ffffff;
width:275px;
}

td.qbox_mid {
padding-left:32px;
padding-right:32px
}

td.qbox2_mr {
background:url(images/qbox2_mr.gif);
background-repeat:repeat-y;
background-position:top;
width:16px;
height:174px;
}

td.qbox2_bl {
background:url(images/qbox2_bl.gif);
background-repeat:no-repeat;
background-position:top;
width:17px;
height:20px;
}

td.qbox2_bm {
background:url(images/qbox2_bm.gif);
background-repeat:repeat-x;
background-position:top;
width:275px;
height:20px;
}

td.qbox2_br {
background:url(images/qbox2_br.gif);
background-repeat:no-repeat;
background-position:top;
width:16px;
height:20px;
}

td.qbox2_tail {
background:url(images/qbox2_b.gif);
background-repeat:no-repeat;
background-position:top;
height:46px;
}




td.qbox3_tl {
background:url(images/qbox3_tl.gif);
background-repeat:no-repeat;
background-position:top;
width:16px;
height:17px;
}

td.qbox3_tm {
background:url(images/qbox3_tm.gif);
background-repeat:repeat-x;
background-position:top;
width:273px;
height:17px;
}

td.qbox3_tr {
background:url(images/qbox3_tr.gif);
background-repeat:no-repeat;
background-position:top;
width:17px;
height:17px;
}

td.qbox3_ml {
background:url(images/qbox3_ml.gif);
background-repeat:repeat-y;
background-position:top;
width:16px;
height:174px;
}

td.qbox3_m {
background:url(images/qbox3_m.gif);
background-repeat:repeat;
background-position:top;
color:#ffffff;
width:273px;
}

td.qbox3_mr {
background:url(images/qbox3_mr.gif);
background-repeat:repeat-y;
background-position:top;
width:17px;
height:174px;
}

td.qbox3_bl {
background:url(images/qbox3_bl.gif);
background-repeat:no-repeat;
background-position:top;
width:16px;
height:20px;
}

td.qbox3_bm {
background:url(images/qbox3_bm.gif);
background-repeat:repeat-x;
background-position:top;
width:273px;
height:20px;
}

td.qbox3_br {
background:url(images/qbox3_br.gif);
background-repeat:no-repeat;
background-position:top;
width:17px;
height:20px;
}

td.qbox3_tail {
background:url(images/qbox3_b.gif);
background-repeat:no-repeat;
background-position:top;
height:46px;
}
    Code (markup):

     

    Attached Files:

    chrisj, Aug 17, 2010 IP
  2. Rimona

    Rimona Active Member

    Messages:
    123
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    63
    #2
    You disobeyed one of the principal commandments:
    If however you decided to sin, do it with STYLE!
    Define the width of your middle column and the problem will go away.

    Nevertheless, you can do this much better using only CSS.
     
    Rimona, Aug 17, 2010 IP
  3. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    Thank you for your assistance.
    I paid someone for this code and images.
    The coder is the sinner.

    However, I fixed it with your kind help.

    Much thanks.
     
    Last edited: Aug 17, 2010
    chrisj, Aug 17, 2010 IP
  4. Rimona

    Rimona Active Member

    Messages:
    123
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    63
    #4
    You're welcome,

    I teach HTML/CSS to 14-15 year old schoolkids. They would never sin like this - dear angels!
     
    Rimona, Aug 17, 2010 IP
  5. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #5
    Pay well to get a good coder :)
     
    radiant_luv, Aug 17, 2010 IP