www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: using an image as a table corner

  1. #1
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133

    Question using an image as a table corner

    I'm trying to use an image to make a corner on a table. i don't know why, but I'm having some trouble. Here is a link to the page, (the code is probably too long to post):

    http://www.geocities.com/manhattanse...ree/test1.html

    any help is greatly appreciated.

  2. #2
    Join Date
    Nov 2002
    Posts
    631
    I don't think that can be done with HTML, but you could use CSS and position it OVER the table's corner.

  3. #3
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    Hmm, I just looked at it in Mozilla and it looks fine. I'm refering to the first table, where it says hello hello hello. where it says "A title" to the right of that is a slanted image. It looks fine in mozilla, but messed up in IE6. This is going to be done with CSS and HTML, that's already understood. What i have already is done like that.

    Ignore the tables below the first one.

  4. #4
    Join Date
    Nov 2002
    Posts
    631
    It works fine in Netscape 7.0!

  5. #5
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    when i view it in IE6 i get a small gap between the title td and the image td next to it. I can't think of why it's there.

  6. #6
    Join Date
    Nov 2002
    Posts
    631
    Just tried it in IE 6.0. I think that your positioning is too much to the right, or it could be that IE bug where things are off by 3px. It looks like a three pixel gap to me.

  7. #7
    Join Date
    Nov 2002
    Posts
    631
    I suggest that instead of using tables, make a div and put that image inside the div on the right. Then make borders for ONLY the left, top, and bottom, but this still might not fix your problem completely.

  8. #8
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    Any one else have any help? I tried doing it with div's and spans but got the same result, see the bottom of the linked page.

  9. #9
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    428
    You set the table to 100%, remove the attribute width on your tables and it should works.


    Swon

  10. #10
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    didn't work.

  11. #11
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    428
    Ok, remove the align=left of the 'corner' images!
    Last edited by swon; 12-23-2002 at 06:44 PM.


    Swon

  12. #12
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    Ah, you're my hero man. It works in IE6, the only browser I have. Anyone else have other browsers they can check it in. I'd really appreciate it.

  13. #13
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    428
    In IE4,5,6,NS4, tables looks good (only the menu is different in NS4, but that's not a problem (less than 10% of NS users))

    By the way, merry christmas!!!!!***


    Swon

  14. #14
    Join Date
    Nov 2002
    Posts
    984
    If you want to get rid of the tables you can do something like this


    <!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=iso-8859-1">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title></title>
    <style type="text/css">
    body {background:#ccc;}

    .tab {text-align:right}
    .tab span {float:left; width:100px; text-align:left; padding-left:10px; color:white; background:purple url(corner4.gif) 100% no-repeat;}

    </style>
    </head>
    <body>

    <div class="tab"><span>A Title</span> <a href="#">Brizzett</a> | 12-12-12 3:45 AM</div>
    <div>hello<br>hello<br>hello</div>

    <div class="tab"><span>A Title</span> <a href="#">Brizzett</a> | 12-12-12 3:45 AM</div>
    <div>hello<br>hello<br>hello</div>

    <div class="tab"><span>A Title</span> <a href="#">Brizzett</a> | 12-12-12 3:45 AM</div>
    <div>hello<br>hello<br>hello</div>


    </body>
    </html>
    // Stefan Huszics

  15. #15
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    The only problem stefan is that the corner picture isn't in there.

    I've come across another question though. On the very bottom of the page, I would like the bottom TD to touch the bottom of the screen. I don't want the purple on the bottom. This seems fairly simple to do it, but I just can't think of it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles