table links

[g2k556]

I am wanting to make a navbar. for the links i want pictures, and i want the picture to change when you hover over it. i know there is a way to do this with javascript, but i don't like js because it's kind of messy. so i am wanting to use css. i've made one attempt at this and it was successful only half way. It worked perfect in FF but in IE the links didn't work.


Here's my css i used:

.home {visibility:visible !important; display: block; width: 152px; height: 49px;}
a.home td{width: 152px; height: 49px; visibility: visible !important; display: block; position:absolute; top: 375px; left: 200px;}

a.home:link td {background-image: url(http://i108.photobucket.com/albums/n11/g2k556/MySpace/Home.png);}
a.home:active td {background-image: url(http://i108.photobucket.com/albums/n11/g2k556/MySpace/Home.png);}
a.home:visited td {background-image: url(http://i108.photobucket.com/albums/n11/g2k556/MySpace/Home.png);}
a.home:hover td {background-image: url(http://i108.photobucket.com/albums/n11/g2k556/MySpace/HomeHover.png);}


Here is the code i used to make the links, i was experimenting with ways to do this and found this worked. but then i went IE and it didn't.


<a class="home" href="http://home.myspace.com/index.cfm?fuseaction=user&MyToken=a63c7923-8cb0-4a95-afc9-fd02a28a3ed0">
<table height="49" width="152" border="0">
<tr>
<td>
</td>
</tr>
</table>
</a>

[ray326]

Try putting them in the right order :link, :visited, :hover, :active.

[The Little Guy]

<table height="49" width="152" border="0">
<tr>
<td>
<a class="home" href="http://home.myspace.com/index.cfm?fuseaction=user&MyToken=a63c7923-8cb0-4a95-afc9-fd02a28a3ed0">
&nbsp;
</a>
</td>
</tr>
</table>

[g2k556]

yea, i tried that and it didn't help. but since i've put this thread up i figured it out. i don't know why it's working now, but i got it to. I just ditched the table part and it works. i just made a link with <a class="home" href="link"></a> and took the td out of the css and for some reason it worked. i must have made a mistake earlier when i tried this because it didn't work then. oh well, it's fixed now, but i'll make sure i put the psuedo-class's in the right order. thanks anyway ;)

it usually happens this way. i'll post a question, and in the mean time i figure it out. i don't get it, i'll spend a long time trying to figure it out, then i post a question, and shortly after, i figure it out.

[ray326]

Oh, you were backwards anyway. I didn't even see the td in there.

td a.home:link {...}

[The Little Guy]

you could shorten up your CSS by doing it this way:
a.home:link td,a.home:active td,a.home:visited td,{background-image: url(http://i108.photobucket.com/albums/n11/g2k556/MySpace/Home.png);}
a.home:hover td {background-image: url(http://i108.photobucket.com/albums/n11/g2k556/MySpace/HomeHover.png);}

[g2k556]

yea, i tried that shortening thing, but it didn't work, but now that i think about it, i may have had the psuedo class's out of order. thanks.

[ray326]

Your links are in a td, your style is for a td in a link.

[g2k556]

thanks for the help guys. i straighten it all out and it's working great now. this was for my myspace, so if you wanna talk a look go ahead MySpace (http://www.myspace.com/hellomynameisgavin) I spent quite a bit of time on it, but it was worth it, it looks pretty good now. not a div space, but close.