Vertical line appears...why?

HTML & CSS
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>

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;
}
2

Thanks much for that info. I appreciate it.
Would you mind giving me an example of “stack them horizontally on the image”?

Thanks again

3

It just goes in the css but you would need to be specific and point it to the tables that are containing the speech bubbles.

Add a class to each of those tables that hold the speech bubbles.


<table[B] class="bubble"[/B]> ... etc...

Then use this css:


table.bubble{table-layout:fixed}

Also, I like your " top and tail it with a single image as you have a fixed width".
Can you provide more details or code?

Thanks again
Just make a single image like this.


And then use this code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.bubble {
    width:275px;
    background:#7a0000 url(images/bubble.gif) no-repeat 0 -66px;
    padding:15px 0 0;
    float:left;
    margin:0 20px 0 0;
    display:inline;
}
.bubble p {
    color:#fff;
    line-height:1.3;
    margin:.5em 0 ;
    padding:1px 10px;
}
.base {
    width:275px;
    height:64px;
    clear:both;
    background: url(images/bubble.gif) no-repeat 0 0;
}
</style>
</head>
<body>
<div class="bubble b1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mauris nunc, suscipit vel iaculis vitae, imperdiet et nibh. Vivamus pretium faucibus dolor, at tincidunt libero gravida quis. imperdiet et nibh. Vivamus pretium faucibus dolor, at tincidunt libero gravida quis</p>
    <div class="base"></div>
</div>
</body>
</html>

The top part of the box is made form the bottom part of that image I made and is placed in such a way using background-position so only the round portion shows. Then the background colour takes over to fill the box.

The base uses the same image again but the height is restricted to show only the part of the image needed. Again the background-position is manipulated so that the image lines up where it should. The box can grow as tall as it needs to be.

You could actually add all your other coloured images to the same image as long as you stack then horizontally on the image and then adjust the background-position to show only the part of the image that’s needed.

Combining images makes for faster loading sites and is called css sprites.

4

Thanks for your reply.
However, I don’t know what to do with:

table{table-layout:fixed}

Where in the code should this go?

Also, I like your " top and tail it with a single image as you have a fixed width".
Can you provide more details or code?

Thanks again

5

Hi,

At a guess I’d say its table behaviour where the table stretches to accommodate that last character before it decides to wrap and pushes the table cell 1px wide and breaking the design.

You could try adding :


table{table-layout:fixed}

And see if it forces the cells to remain at the correct width. It may just be a rounding error with tables though.

That’s some very ugly code you have there and you shouldn’t really be using tables for that. You would be better off with one of the CSS rounded boxes (although the code is pretty ugly still).

Or if you don’t care about IE you could use border-radius etc for the rounded corners.

Or just top and tail it with a single image as you have a fixed width. Here’s an example.

http://www.pmob.co.uk/temp/bubble.htm

That’s a fraction of the code you have. :slight_smile:

6

Sure you would need an image that looks like this.

Refresh this page to see the effect.

The extra images were simply placed with this extra code:


.b2{background-position:-300px -66px;background-color:#b03900}
.b2 .base{background-position:-300px 0}

.b3{background-position:-600px -66px;background-color:#d38600}
.b3 .base{background-position:-600px 0}

Just view the page source to see the full code as it is all in the head of the page.