benjudy Posted May 1, 2006 Share Posted May 1, 2006 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.