removing top lines

[shank]

http://66.98.197.102/test.htm
Please look at the above. You should be able to see the shape I'm trying to
create.
In IE 6.0, there's a small line at the top right of the corner.
In NS 7.1, there's a small line across the whole top of the tab.
How do I get rid of those small lines?
thanks!

 

[Steve Pugh]

http://66.98.197.102/test.htm
Please look at the above. You should be able to see the shape I'm trying to
create.
In IE 6.0, there's a small line at the top right of the corner.
In NS 7.1, there's a small line across the whole top of the tab.
How do I get rid of those small lines?

You've set the background colour of the table to red.
The images are 15 pixels high.
The text is taller than that (zooming the text down to 90% in Mozilla
makes the lines vanish).
So some of the background colour shows up above the image.

Setting valign="top" or vertical-align: top; for those cells might fix
it, but I'd prefer something more like this (styles that have no
effect also removed):

<table style="border-collapse:collapse; background-color:#F00; border:
none;"><tr>
<td style="width:15px; background-image: url(tleftFF0.gif);
background-repeat: no-repeat; background-position: top left;"></td>
<td style="width:200px; text-align:center; font-size:80%;
font-weight:bold; color:#FFFFFF;">HAPPY VALENTINES DAY!</td>
<td style="width:15px; background-image: url(trightFF.gif);
background-repeat: no-repeat; background-position: top right;"></td>
</tr></table>

Although I'd probably not use a table at all for this.

BTW, alt="&quot;&quot;" ????

Steve

 

[shank]

You've set the background colour of the table to red.
The images are 15 pixels high.
The text is taller than that (zooming the text down to 90% in Mozilla
makes the lines vanish).
So some of the background colour shows up above the image.

Setting valign="top" or vertical-align: top; for those cells might fix
it, but I'd prefer something more like this (styles that have no
effect also removed):

<table style="border-collapse:collapse; background-color:#F00; border:
none;"><tr>
<td style="width:15px; background-image: url(tleftFF0.gif);
background-repeat: no-repeat; background-position: top left;"></td>
<td style="width:200px; text-align:center; font-size:80%;
font-weight:bold; color:#FFFFFF;">HAPPY VALENTINES DAY!</td>
<td style="width:15px; background-image: url(trightFF.gif);
background-repeat: no-repeat; background-position: top right;"></td>
</tr></table>

Although I'd probably not use a table at all for this.

My curiosity is killing me. How would you create this kind of shape with
CSS?
thanks

 

[Steve Pugh]

http://66.98.197.102/test.htm

[snip]
Although I'd probably not use a table at all for this.

My curiosity is killing me. How would you create this kind of shape with
CSS?

Same way you did, with images. I just wouldn't use a table.

One possible way of doing this would be:

h1 {width: 10em; padding: 0 25px; background: #F00; position:
relative; text-align: center;}
h1 span {position: absolute; top: 0; width: 15px; height: 15px;
background-repeat: no-repeat;}
#tl {background-image: url(tleft.gif); left: 0;}
#tr {background-image: url(tright.gif); right: 0;}

<h1><span id="tl"></span><span id="tr"></span>Heading</h1>

Steve

 

[Mark Parnell]

My curiosity is killing me. How would you create this kind of shape with
CSS?

I know it's not quite what you are asking, but check this out:
http://www.designdetector.com/tips/3DBorderDemo2.html