Jump to content

<a> entire inside of table cell


benjudy

Recommended Posts

I'm at my wit's end here... any help would be greatly appreciated!

I'm building navigation tabs in a single-row <table>.

Any given tab may have one, two, or three lines of text. Text must be in the middle vertically and horizontally centered.

Here's the kicker: the entire inside area of the table cell must be clickable. In other words, the <a> has to fill the entire height and width of each cell -- regardless of how many lines of text.

When I have one cell with three lines of text, and another cell with only one, I can't seem to get it working.

I can either get the entire cell clickable, but the text aligned at the top. Or, I can get the text vertically in the middle, but the entire cell is not clickable. Frustrating.

Before anyone says, "why not use a list?", I've already been down that road. Can't meet all of the above requirements using <li>'s, no matter how many CSS tricks I've thrown at it. So, I'm going with a table.

Must work in FF and IE 5.5, 6
---
#tabs td{border:1px solid #000;font-size:3em;text-align:center;vertical-align:middle;}
#tabs a{background-color:green;display:block;height:100%;text-decoration:none;}
#tabs a:hover{background-color:yellow;}

<div id="tabs">
<table>
<tr>
<td><a href="#">tab 1</a></td>
<td><a href="#">tab 2<br/>line two</a></td>
<td><a href="#">tab 3<br/>line two<br/>line three</a></td>
</tr>
</table>
</div>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.