using an image as a table corner

liunx · Jan 9, 2008

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): 
 
<a class="postlink" href="http://www.geocities.com/manhattanseniors/17thdegree/test1.html">http://www.geocities.com/manhattansenio ... test1.html</a> 
 
any help is greatly appreciated.I don't think that can be done with HTML, but you could use CSS and position it OVER the table's corner.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.It works fine in Netscape 7.0!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.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.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.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.You set the table to 100%, remove the attribute width on your tables and it should works.didn't work.Ok, remove the align=left of the 'corner' images!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.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!!!!!***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

urple url(corner4.gif) 100% no-repeat;} 
 
</style> 
</head> 
<body> 
 
<div class="tab">A Title <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Brizzett</a> | 12-12-12 3:45 AM</div> 
<div>hello hello hello</div> 
 
<div class="tab">A Title <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Brizzett</a> | 12-12-12 3:45 AM</div> 
<div>hello hello hello</div> 
 
<div class="tab">A Title <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Brizzett</a> | 12-12-12 3:45 AM</div> 
<div>hello hello hello</div> 
 
 
</body> 
</html>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.Originally posted by thejoker101 
The only problem stefan is that the corner picture isn't in there. 
 
Yes it is, but you of cource have to provide the correct URL for it in this section of the CSS 
 
background

urple url(corner4.gif) 100% no-repeat;whoops, didn't see that, let me check it out... 
 
Thoughts on the bottom TD not touching the bottom of the screen?Ok, it works, with one exception. The way I have it set up, the span it's in uses a border for the left and top, when I use your example it adds the border line over the image because it is in the span. 
 
Any way around that? Would it be possible to nest two spans, or something like that. 
 
I appreciate your help.Originally posted by thejoker101 
Ok, it works, with one exception. The way I have it set up, the span it's in uses a border for the left and top, when I use your example it adds the border line over the image because it is in the span. 
 
Any way around that? Would it be possible to nest two spans, or something like that. 
 
 
Yes, you could use 2 spans if you like, with the second only containg the backgrund. 
Alternativly you could put the image back into the page and float it left too, but that is more tedious if you decide to modify the layout in the future as you then have to change it on every page. 
 
Perhaps this would be the best actually 
 
 
<!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 em {float:left; width:100px; text-align:left; padding-left:10px; color:white; background

urple;} 
.tab span {float:left; width:15px; background:url(corner4.gif) 0 no-repeat;} 
 
</style> 
</head> 
<body> 
 
<div class="tab">A Title <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Brizzett</a> | 12-12-12 3:45 AM</div> 
<div>hello hello hello</div> 
 
</body> 
</html>Unless I'm missing it, that didn't show the image. 
 
Your example is located here, it's on the very bottom of the page, <a class="postlink" href="http://www.geocities.com/manhattanseniors/17thdegree/test2.html">http://www.geocities.com/manhattansenio ... test2.html</a>Originally posted by thejoker101 
Unless I'm missing it, that didn't show the image. 
 
 
Sorry, my mistake 
 
 
should read 
 Adding the non-breaking space did add the picture. however, it added it about 2 pixels lower than it needs to be. I thought it might be because some of the text is larger than I wanted it to be, so I added some font changing CSS. Also, instead of useing the tag, I used another flag, but I also added Class names to them, and in my style sheet I referenced them by: .tab span.SpanClassName This seemed to work. 
 
Another problem that seemed to happen was that the first line of the text below became centered, not sure on that. Again, you can view the test page at: 
 
<a class="postlink" href="http://www.geocities.com/manhattanseniors/17thdegree/test2.html">http://www.geocities.com/manhattansenio ... test2.html</a> 
 
The referenced style sheet is located here: 
<a class="postlink" href="http://www.geocities.com/manhattanseniors/17thdegree/style2.css">http://www.geocities.com/manhattansenio ... style2.css</a> 
 
Again, thank you for your time.Originally posted by thejoker101 
Adding the non-breaking space did add the picture. however, it added it about 2 pixels lower than it needs to be. 
 
 
You controll the hor & vert position of the background with the values you give in % or px 
 
eg 
background:url(corner4.gif) 2px 3px no-repeat; 
 
 
Also, instead of useing the tag, I used another flag, but I also added Class names to them, and in my style sheet I referenced them by: .tab span.SpanClassName This seemed to work. 
 
 
Yepp it works fine that way too. I just used since it made scence both structurally in the markup but also alowed for a much shorter code. 
If both are spans you will have to add the class="whatever" to each and every span on the page which bloats the code unnessecarily in this case. 
 
 
Another problem that seemed to happen was that the first line of the text below became centered, not sure on that. 
 
That looks like a small IE bug. 
Should be easy enough to work around. I presume simply specifying the height of the tab div should fix that

using an image as a table corner

liunx

Guest