PDA

View Full Version : Text Rollover "Breaks" in IE After Clicking

Krayfish
10-11-2005, 09:32 PM
A "view cart" text rollover I'm using with PayPal's shopping cart works but doesn't display properly. It will only work once in IE 6.0 (in other words, the rollover "breaks" after the first click on it). It appears to be OK in Firefox. Any suggestions on fixing are most appreciated... :)


Here's the code (the PayPal link is intentionally phony):


<html>

<head>

<style type="text/css">

<!--

a.one:link

{text-decoration:none;color:black;display:block;width:100%;height:100%;background:#959595;}
a.one:visited

{text-decoration:none;color:black;display:block;width:100%;height:100%;background:#959595;}
a.one:hover

{text-decoration:none;color:#ffffff;display:block;width:100%;height:100%;background:#959595;}
a.one:active

{text-decoration:none;color:black;display:block;width:100%;height:100%;background:#959595;}

-->

</style>

</head>

<body link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">

<table width="100" border="0" align="right" cellpadding="0" cellspacing="2">
<tr>
<td><div align="center"><font size="+0" face="Arial, Helvetica, sans-serif"><a class="one"

href="#"

onclick="window.open('https://www.paypal.com/cart/display=1&business=test%40invalid.com','cartwin'

,'width=600,height=400,scrollbars,location,resizable,status');"><strong>View

Cart</strong></a></font></div>
</div></td>
</tr>
</table>

</body>
</html>
nikkiH
10-11-2005, 09:44 PM
It's following the href.
Put a return false in there.

<a class="one"
href="#"
onclick="window.open('https://www.paypal.com/cart/display=1&business=test%40invalid.com','cartwin'
,'width=600,height=400,scrollbars,location,resizable,status');return false;"
Krayfish
10-11-2005, 10:19 PM
Thanks nikkiH. It does seems like the "return false" needs to be there (?), but unfortunately it didn't fix the problem. :confused:
nikkiH
10-11-2005, 11:07 PM
Order of the CSS matters.
Put hover last.

<style type="text/css">
<!--
a.one:link
{text-decoration:none;color:black;display:block;width:100%;height:100%;background:#959595;}
a.one:visited
{text-decoration:none;color:black;display:block;width:100%;height:100%;background:#959595;}
a.one:active
{text-decoration:none;color:black;display:block;width:100%;height:100%;background:#959595;}
a.one:hover
{text-decoration:none;color:white;display:block;width:100%;height:100%;background:#959595;}
-->
</style>

(yeah, I forgot too don't feel bad LOL)
Krayfish
10-12-2005, 02:25 AM
Thanks!! I'm still a bit confused, though - I always thought that Link,Visited,Hover,Active was the standard order, but I can't deny that this works... :thumbsup:

The other CSS links in my page don't link "off site" like the 'View Cart' link does. Is there any reason to create a seperate CSS selector set for them using the standard L,V,H,A order instead of L,V,A,H, or can all links just use L,V,A,H?

TIA again for your help.
nikkiH
10-12-2005, 02:39 PM
The order matters because the last thing that matches is what is used.

I'm not a CSS guru, so I probably am not quite explaining it right (this really belongs in the html/css forum). Heck, I still use tables for layout most of the time because I can never get the divs to do what I want without tables. :D

I just know it works. LOL

/ more a coder than a designer