homepage Welcome to WebmasterWorld Guest from 54.145.183.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
link with preview
=link around table?
Skier88

5+ Year Member



 
Msg#: 4238966 posted 6:37 pm on Dec 5, 2010 (gmt 0)

I have a page that turns up a list of results, which I would like to display as a link to the page along with a short preview of several parts of the page. The format that makes the most sense to me is using a table, where the first column (width:40%;) contains the name, the second (width:30%;) stats 1 and 2, and the third (width:30%;) stats 3 and 4, with the entire table being two lines high plus padding/margins. There's no problem if I only want the title to link to the page, but since the consecutive tables (maybe 20 clearly separated 2-line results per page) create a row-like effect I want the user to be able to click anywhere on the table.

Wrapping a table or row in <a> validates only in html5, which means most older browsers have a problem with it. Putting the table in a button works, but doesn't have link functionality. Replacing the table with styled divs also doesn't validate before html5. Replacing the table with styled spans (float:left; and width/height/padding) works in most browsers and validates for the html versions I've tested, but IE decided not to support it. I don't want to use javascript because that breaks browser functionality.

I'm running out of ideas ... I'm about to just link the title and use javascript to link the table if the browser supports it. Does anybody have any other ideas?

[edited by: tedster at 7:28 pm (utc) on Dec 5, 2010]
[edit reason] turned off graphic smile faces [/edit]

 

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4238966 posted 7:32 pm on Dec 5, 2010 (gmt 0)

The reason the HTML 5 allows that kind of anchor tag is that most browsers have supported that kind of mark-up for a long time. The did this because many web authors write their mark-up that way - even though it didn't validate. So HTML 5 just makes it official.

I'd say just use the HTML 5 doctype and wrap the row inside an anchor element.

Skier88

5+ Year Member



 
Msg#: 4238966 posted 12:51 am on Dec 6, 2010 (gmt 0)

Thanks for your input - I agree that it's good enough if it only works on reasonably recent browsers, although I do try to use more compatible methods where possible. The problem is, when each row is its own table surrounded by an anchor even the latest version of IE (for XP) won't let you follow the link. It makes it the correct size, but when you click on it the table blocks your cursor. And putting anchors around rows doesn't validate anywhere and after a few minutes I haven't been able to get it to work with my styling, although the latter could probably be fixed.

I'm also thinking I could put links in every cell, but I'd like to avoid feeding the browser one piece of information five times.

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4238966 posted 1:29 am on Dec 6, 2010 (gmt 0)

That should teach me - I posted advice without actually checking to see how IE handles the mark-up. Sorry. Yes, looks like the best you're going to get is using JavaScript.

kaled

WebmasterWorld Senior Member kaled us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4238966 posted 1:31 am on Dec 7, 2010 (gmt 0)

Replacing the table with styled spans (float:left; and width/height/padding) works in most browsers and validates for the html versions I've tested, but IE decided not to support it.

I had a play and IE8, Opera 11 and Firefox 3.5 seem happy with this approach (unless I misunderstood your requirements).

Kaled.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Page</title>

<style type="text/css">
a.table_links { text-decoration:none }
a.table_links:hover { background-color:yellow }
a.table_links span { background-color:inherit; display:block; float:left}
a.table_links span.h { width:100%; text-align:center; padding-top:8px; font:bold 20px Sans-Serif }
a.table_links span.c1 { width:40% }
a.table_links span.c2 { width:30% }
a.table_links span.c3 { width:30% }
</style>

</head>

<body>

<div>
Some Text<br>
<br>
</div>

<div style="width:30%">
<a href="target.html" class="table_links">
<span class="c1">Do I</span>
<span class="c2">win a</span>
<span class="c3">prize</span></a>

<a href="target2.html" class="table_links">
<span class="h">Link Title</span>
<span class="c1">Or</span>
<span class="c2">merely</span>
<span class="c3">admiration</span></a>
</div>

<div style="clear:left; background-color:silver"> <!-- may need to use clear:both in some circumstances -->
<br>
<br>
Some More text
</div>

</body>
</html>

Skier88

5+ Year Member



 
Msg#: 4238966 posted 6:26 am on Dec 9, 2010 (gmt 0)

lol ... merely admiration, with gratitude on the side. But a limited quantity, because that doesn't actually solve the entire problem as it doesn't work in IE7 (I should really try for 6 too, but my site is already a mess in that browser). However, your design made me realize I can definitely expand that idea further, and now I've got new code, partially based on yours, that works with all modern browsers and back through IE7, with two minor bugs: the "table"'s padding isn't part of the link, and IE opens the wrong context menu. I think I can live with it for now, although I still hope to hear from somebody with a better method.

Here's my new code - it's a bit puffed up to allow for an outline in IE7, a single background image, and the specific cell format I described in the OP.


<!doctype html>
<html>
<head>
<title>I don't know why I want this to validate</title>
<style type='text/css'>
#results>div {border:2px solid #eee;}
#results>div:hover {border-color:#0689d4;}
#results>div:hover * {cursor:pointer;} /*IE7*/
#results a {color:black; text-decoration:none;}
#results h2 {position:relative; bottom:2px;}
#results a>span {display:block; float:left; width:30%; height:50%;}
#results a>span:first-child {width:40%; height:100%;}
</style>
</head>
<body>

<div id='results'>
<div><div><a href='/light:%s'>
<span><h2>title</h2></span>
<span>stat1</span>
<span>stat2</span>
<span>stat3</span>
<span>stat4</span>
</a></div></div>

<div><div><a href='/light:%s'>
<span><h2>title</h2></span>
<span>stat1</span>
<span>stat2</span>
<span>stat3</span>
<span>stat4</span>
</a></div></div>

<div><div><a href='/light:%s'>
<span><h2>title</h2></span>
<span>stat1</span>
<span>stat2</span>
<span>stat3</span>
<span>stat4</span>
</a></div></div>
</div>

</body>
</html>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved