Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using "display:block" in a table 1

Status
Not open for further replies.
gingerbbm

gingerbbm

Programmer
Dec 2, 2003
4
0
0
GB
Hi All

Using IE6 I want to display an anchor tag in block mode as the second cell in a row of a table. I want to use block mode so that the user can click anywhere within the cell to trigger the event (yes, it's a menu bar!)

Anyway, it works if it's the *first* cell:

<table width=&quot;100%&quot; border=&quot;2&quot;>
<tr>
<td><a href=&quot;#&quot; style=&quot;display:block; cursor:hand&quot;>Some text</a></td>
</tr>
</table>

But not if it's the second:

<table width=&quot;100%&quot; border=&quot;2&quot;>
<tr>
<td>...</td>
<td><a href=&quot;#&quot; style=&quot;display:block; cursor:hand&quot;>Some text</a></td>
</tr>
</table>

Now, I've been scratching my head for a while on this, and more worryingly have just discovered that it works in Mozilla 1.5.

Any help is immensely appreciated.

Cheers
Stu
 
Sort by date Sort by votes
Just explain to IE how big you want the thing to be:

<table width=&quot;100%&quot; border=&quot;2&quot;>
<tr>
<td>...</td>
<td><a href=&quot;#&quot; style=&quot;display:block; width: 100%; height: 100%;&quot;>Some text</a></td>
</tr>
</table>

I removed the cursor: hand property since links will show cursor hand by default. And I think hand should actually be pointer. Hope it helps.
 
Upvote 0 Downvote
Excellent stuff! Thanks for your help. Seems obvious now...

Cheers
Stu
 
Upvote 0 Downvote
Now you've got each link displaying as a block, why bother with the table at all? compare
[tt]
<html>
<head>
<style type=&quot;text/css&quot;>
<!--
a.menu {display:block;
cursor:hand;
background: #CCCCCC;
width:200px;
text-align:center;}
a:hover {background: #FFFFCC;}
-->
</style>
</head>
<body>
<table>
<tr><td><a class=&quot;menu&quot; href=&quot;#&quot;>Some text</a></td></tr>
<tr><td><a class=&quot;menu&quot; href=&quot;#&quot;>Some text</a></td></tr>
<tr><td><a class=&quot;menu&quot; href=&quot;#&quot;>Some text</a></td></tr>
<tr><td><a class=&quot;menu&quot; href=&quot;#&quot;>Some text</a></td></tr>
</table>
</body>
</html>
[/tt]
with
[tt]
<html>
<head>
<style type=&quot;text/css&quot;>
<!--
a.menu {display:block;
cursor:hand;
background: #CCCCCC;
width:200px;
text-align:center;
border:2px solid white;}
a:hover {background: #FFFFCC;}
-->
</style>
</head>
<body>
<a class=&quot;menu&quot; href=&quot;#&quot;>Some text</a>
<a class=&quot;menu&quot; href=&quot;#&quot;>Some text</a>
<a class=&quot;menu&quot; href=&quot;#&quot;>Some text</a>
<a class=&quot;menu&quot; href=&quot;#&quot;>Some text</a>
</body>
</html>
[/tt]
What difference does the table make?

-- Chris Hunt
 
Upvote 0 Downvote
Good point. However, each menu &quot;bar&quot; is to contain a number of functional elements, such as icons and a checkboxes. I tried using relative positioning but ran into problems; tables gave me predictable control.

Added to that is the fact that this code will end up in dynamically generated ASP.NET web controls and the notion of &quot;a cell in the row of the table of the panel&quot; is easier to express.

Plus, the whole bar has to move if necessary.

Thanks for the input though!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
206
spamjim
spamjim
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
67
Alt255
Alt255
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
307
Chris Miller
Chris Miller
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
126
198709km
198709km
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
278
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top