?
Solved

hyperlink to get table cell to change color, stay in middle of table cell

Posted on 2006-03-23
4
Medium Priority
?
1,536 Views
Last Modified: 2008-01-09
Hello experts,

I'm designing a sidebar menu and I want the table cells to change color when hovered over.  I have accomplished this through css for the hyperlinks within the cells and using display:block to change the cells.  This all works fine and dandy, but I would prefer if the links were in the middle of the cells rather than at the top.  I have tried different settings to no avail, including vertical-align:middle, margin-top, etc.  All either do nothing or don't highlight the whole cell (such as in the case of margins).  Can anyone help me out here?  Thanks!

Here's some code I'm using....

The css:

a.menu:link {text-decoration:underline;color:#555555;display:block;width:100%;height:100%;background:#DDDDDD;}
a.menu:visited {text-decoration:underline;color:#555555;display:block;width:100%;height:100%;background:#DDDDDD;}
a.menu:hover {text-decoration:none;color:black;width:100%;display:block;height:50;background:#EEEEEE;}
a.menu:active {text-decoration:none;color:black;width:100%;display:block;height:50;background:#EEEEEE;}

the html:

<table align=center width=100% cellpadding = 0 cellspacing=0>
    <tr><tr><td valign=middle height=50 align=center class=leftbar><b><a href="WAstatetaxes.aspx" class=menu>Washington State Taxes</a></b></td></tr>
    <tr><td valign=middle height=50 align=center class=leftbar><b><a href="classactions.aspx" class=menu>Class Actions</a></b></td></tr>
    <tr><td valign=middle height=50 align=center class=leftbar><b><a href="bio.aspx" class=menu>Biography</a></b></td></tr>
    <tr><td valign=middle height=50 align=center class=leftbar><b><a href="links.aspx" class=menu>Links</a></b></td></tr>
    <tr><td height=400>&nbsp;</td></tr>
    </table>

Thanks!
0
Comment
Question by:brianpsmith81
  • 2
4 Comments
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 200 total points
ID: 16267202
In basics any element should be able to support the :hover pseudoclass and this rings true for all css2 browsers. That leaves you with Internet Explorer, which lacks the support you seek. However, Peter Nederlof has created a simple 'hack' to allow us the use of the :hover pseudoclass on any element in any current browser.
Have a look at his article: http://www.xs4all.nl/~peterned/csshover.html
It explains the use of his '.htc' file and how to enable it in your website. It also shows you an alternative way of creating a menu, as that's what :hover is most often used on. I think it'll be a verry interresting read for you.

Using the mentioned technique you won't have to meddle with the anchor anymore, or at least to a lesser degree and you'll be able to swtich the background of the table-cell instead, best of both worlds, wouldn't you say?

Good luck,

 Martin
0
 
LVL 4

Accepted Solution

by:
BonRouge earned 300 total points
ID: 16269175
The slight problem with an .htc file is that it assumes javascript is enabled (it doesn't work without it).

See if this page helps you: http://bonrouge.com/br.php?page=tablemenus
0
 
LVL 3

Author Comment

by:brianpsmith81
ID: 16271726
BonRouge,  thanks for the help, your code seems to work for the most part, however there is still some discrepancy between browsers.  http://www.seversonlaw.com/default.aspx is the page I am working on.  If you view it in IE7beta (and probably other versions of IE) it shows a 1px bottom border, but on hover, the highlighting does not reach to these borders.  In Firefox, it simply doesn't show the border.  My preference is for all browsers to show both the border and for the highlighting to fill the cell up completely.

/*table-menu 1*/

#tablemenu1 {
width: 100%;
margin: 0 auto;
border-collapse:collapse;
table-layout:fixed;
}
#tablemenu1 td {
width:25%;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;
border-bottom-color: #EEEEEE;
}
#tablemenu1 td a {
text-decoration:none;
display:block;
padding:8px;
}
#tablemenu1 td a:link, #tablemenu1 a:visited,
#tablemenu1 a:active{
color: #555555;
background-color:#DDDDDD;
}
#tablemenu1 td a:hover {
color: #000000;
background-color:#EEEEEE;
}
#tablemenu1 td {
text-align: center;
}
* html #tablemenu1 td a {height:1px;}
0
 
LVL 3

Author Comment

by:brianpsmith81
ID: 16428489
I guess I'll leave it the way it is, thanks.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month16 days, 1 hour left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question