PDA

View Full Version : color: transparent; not work in ie8?



alexmel7
Apr 29th, 2009, 10:46 PM
Hey everyone, I have an image that I am using as a link. Over the image, I want text to appear in the hover and active states. So, I gave the the link state the "color: transparent;" css property. This works fine in FF and Chrome, but the text just appears black in IE8. Does IE8 not support the transparent property?

Truger
Apr 29th, 2009, 10:55 PM
what if instead of making it transparent you change the opacity to 0%

sorta like this


<object type="text/html" data="http://www.google.com" height="400px" width="400px" style="filter:alpha(opacity=50);opacity:0.5; -moz-opacity:0.5;"></object>

Apostropartheid
Apr 29th, 2009, 11:27 PM
Or use text indents. There are a few ways about this.

Major Payne
Apr 30th, 2009, 07:53 AM
If the image is a png, then IE has problems with png formatted images. The word "transparent" does not imply a color anyway although "background-color: transparent" is used.

I suspect it's the image format you are using.

_Aerospace_Eng_
Apr 30th, 2009, 08:02 AM
If the image is a png, then IE has problems with png formatted images. The word "transparent" does not imply a color anyway although "background-color: transparent" is used.

I suspect it's the image format you are using.

Only IE6 and below have problems with alphatransparency on pngs. IE does have a problem with the color palette of pngs though but can be removed with some other software.

coothead
Apr 30th, 2009, 09:45 AM
...There are a few ways about this.

The visibility attribute is one of them.

There is, invariably, more than one way to skin a cat. ;)

coothead

Apostropartheid
Apr 30th, 2009, 05:21 PM
The visibility attribute is one of them.

There is, invariably, more than one way to skin a cat. ;)

coothead
Exactly what I was thinking ;)

alexmel7
Apr 30th, 2009, 06:10 PM
The visibility attribute is one of them.

There is, invariably, more than one way to skin a cat. ;)

coothead

I am placing the image though by making it the background of the link. If I use visibility: hidden, it will hide the image as well as the text.

Apostropartheid
Apr 30th, 2009, 06:16 PM
If there's a container, it's perfectly possible to use visibility.

coothead
Apr 30th, 2009, 06:40 PM
Hi there alexmel7,

here is a basic example...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#mylink {
width:360px;
line-height:280px;
display:block;
background-image:url(http://www.coothead.co.uk/images/apple.jpg);
border:2px solid #000;
text-align:center;
text-decoration:none;
font-weight:bold;
color:#f00;
}
#mylink span {
visibility:hidden;
}
#mylink:hover span,#mylink:active span {
visibility:visible;
}
</style>

</head>
<body>

<div>
<a id="mylink" href="#"><span>this is the link text</span></a>
</div>

</body>
</html>

coothead

alexmel7
Apr 30th, 2009, 10:00 PM
Awesome. That worked perfectly coothead. Thanks everyone for the help. :)

coothead
Apr 30th, 2009, 11:13 PM
No problem, you're welcome. ;)