CSS3 PIE Forums
http://css3pie.com/forum/

link text dissapears behind background
http://css3pie.com/forum/viewtopic.php?f=6&t=2053
Page 1 of 1

Author:  Johnie [ Wed May 01, 2013 1:41 pm ]
Post subject:  link text dissapears behind background

I've been through github and forum issues completely. The closest issue to the problem is position:relative / z-index but I've tried every possible HTML and CSS config I can think of. I tried to separate the link text with span and h3 to apply higher z-index but that didn't work either. No matter what i do, even setting background to none, transparent or transparent image, the link text is not visible and the only thing changed was the color of the background. The most interesting was when I used a transparent image and the background changed to white which is not set anywhere as a bg color. I don't test in IE 6 any more but IE 8 was the only one that hid the link text and everything worked fine in 7 and 9.

Code:
 .divine a:link, .divine a:active, .divine a:visited {background-color:#294C24;border:#5F943F 2px solid;margin:6px 0 0 30px;padding:4px 8px 4px 8px;font-size:16px;position:relative;text-decoration:none;behavior:url(righteously_raw_includes/IE-PIE/PIE.htc);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;box-shadow:4px 5px 8px 0 rgba(0, 0, 0, 1.3);-moz-box-shadow:4px 5px 8px 0 rgba(0, 0, 0, 1.3);-webkit-box-shadow:4px 5px 8px 0 rgba(0, 0, 0, 1.3);white-space:nowrap;z-index:100;color:#F2F0E1;}

Code:
.divine a:hover {text-decoration:underline;}


Code:
<p class="divine"><a href="divine_mint_raw_chocolate.php">DIVINE MINT</a> - 82% RAW CACAO</p>


BTW - it works fine on my localhost, and, unrelated but still curious, when i validate the CSS I get an error on each CSS that uses PIE - "Property behavior doesn't exist : url(righteously_raw_includes/IE-PIE/PIE.htc)"

Author:  Tonttu [ Fri May 03, 2013 2:23 am ]
Post subject:  Re: link text dissapears behind background

Apply the behavior to .divine a without any :pseudo elements.

Author:  Johnie [ Fri May 03, 2013 10:45 am ]
Post subject:  Re: link text dissapears behind background

BTDT, no change, link text disappears behind background in IE 8. I've tried both ver 1 and 2 beta.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
.divine a, .divine a:link, .divine a:active, .divine a:visited {background-color:#294C24;border:#5F943F 2px solid;margin:6px 0 0 30px;padding:4px 8px 4px 8px;font-size:16px;position:relative;text-decoration:none;behavior:url(IE-PIE/PIE.htc);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;box-shadow:4px 5px 8px 0 rgba(0, 0, 0, 1.3);-moz-box-shadow:4px 5px 8px 0 rgba(0, 0, 0, 1.3);-webkit-box-shadow:4px 5px 8px 0 rgba(0, 0, 0, 1.3);white-space:nowrap;z-index:100;color:#F2F0E1;}
-->
</style>
</head>
<body>
<p class="divine"><a href="divine_mint_raw_chocolate.php">DIVINE MINT</a> - 82% RAW CACAO</p>
</body>
</html>

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/