removing top lines

Discussion in 'HTML' started by shank, Jan 28, 2004.

  1. shank

    shank Guest

    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!
     
    shank, Jan 28, 2004
    #1
    1. Advertising

  2. shank

    Steve Pugh Guest

    "shank" <> wrote:

    >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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jan 28, 2004
    #2
    1. Advertising

  3. shank

    shank Guest

    "Steve Pugh" <> wrote in message
    news:...
    > "shank" <> wrote:
    >
    > >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.
    >


    My curiosity is killing me. How would you create this kind of shape with
    CSS?
    thanks
     
    shank, Jan 28, 2004
    #3
  4. shank

    Steve Pugh Guest

    "shank" <> wrote:
    >"Steve Pugh" <> wrote in message
    >news:...
    >> "shank" <> wrote:
    >>
    >> >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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jan 28, 2004
    #4
  5. shank

    Mark Parnell Guest

    Mark Parnell, Jan 28, 2004
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Frederic HOUDE
    Replies:
    4
    Views:
    629
    Frederic HOUDE
    Aug 31, 2004
  2. Chris  Chiasson
    Replies:
    6
    Views:
    652
    Richard Tobin
    Nov 14, 2006
  3. Cuthbert
    Replies:
    8
    Views:
    462
    Ancient_Hacker
    Sep 13, 2006
  4. AAaron123
    Replies:
    6
    Views:
    618
    AAaron123
    Nov 5, 2009
  5. Hvid Hat
    Replies:
    3
    Views:
    135
    Thomas 'PointedEars' Lahn
    Jan 24, 2008
Loading...

Share This Page