4

I have a problem with IE8 where I cannot make <a> elements transparent. I've found these related SO questions but I haven't had any luck with the answers provided there:

I've tried "giving layout", by using zoom: 1;, but it hasn't helped. Here is my test CSS, lifted from the example on this page:

.test {
  background-color: #6374AB;
  width: 100%;
  color: #ffffff;
  zoom: 1;
}
.opaque1 {
  opacity: .5;
}
.opaque2 {
  filter: alpha(opacity=50);
}
.opaque3 {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.opaque4 {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}

And the test HTML:

<p class="test">Test paragraph without opacity.</p>
<p class="test opaque1">Test paragraph with <code>opacity</code></p>
<p class="test opaque2">Test paragraph with <code>filter</code></p>
<p class="test opaque3">Test paragraph with <code>-ms-filter</code></p>
<p class="test opaque4">Test paragraph with compatibility note</p>

<p>
  <a class="test" href="#">Test anchor without opacity.</a><br/>
  <a class="test opaque1" href="#">Test anchor with <code>opacity</code></a><br/>
  <a class="test opaque2" href="#">Test anchor with <code>filter</code></a><br/>
  <a class="test opaque3" href="#">Test anchor with <code>-ms-filter</code></a><br/>
  <a class="test opaque4" href="#">Test anchor with compatibility note</a><br/>
</p>

In IE8, the opaque2, opaque3, and opaque4 paragraphs are transparent, but none of the anchors are. In IE6, the opaque2 and opaque4 paragraph and anchor both have transpareny.

Community
  • 1
  • 1
Jenni
  • 1,668
  • 4
  • 20
  • 28
  • +1... well posed question! Quick question... have you tested this on IE7 and if you have, what is the result? – Hristo Aug 10 '10 at 20:25
  • @Hristo: sorry, I don't have an IE7 env. set up right now – Jenni Aug 10 '10 at 20:41
  • So, have you tried using filter and -ms-filter as referenced in .opaque in the page you sourced? – Bryan Downing Aug 10 '10 at 21:04
  • @Bryan: do you mean something different than the source code I've posted? – Jenni Aug 10 '10 at 21:23
  • Yes. Read the IE compatibility note on http://www.quirksmode.org/css/opacity.html. I don't have time to test it just yet. – Bryan Downing Aug 10 '10 at 21:58
  • @Bryan: gotcha. i edited the question with the test case. same results: the paragraph is transparent, but the anchor is not. i've done some other testing and it looks like any `inline` element (i.e. a ``) does not get the transparency. but i find it difficult to believe that even the IE team would completely remove the ability to make inline text transparent – Jenni Aug 10 '10 at 22:17

1 Answers1

6

Try giving the anchor display:block, but then you will have to fix its css properties like the width, height .... etc. But once you give the anchor the property display:block the opacity will work fine.

According to the comments, you may have luck with display: inline-block;zoom:1 - The inline-block works on IE8, the zoom will target IE 6/7.

gnarf
  • 105,192
  • 25
  • 127
  • 161
Naruto
  • 6,398
  • 5
  • 21
  • 24
  • thanks... but is there no way at all to make an inline object transparent in ie8? block has some problems because it doesn't work like text. (and it's not supposed to, of course.) – Jenni Aug 11 '10 at 17:57
  • What kind of problems occur when you use block ?? Is it stuff that you can solve using CSS ?? – Naruto Aug 12 '10 at 07:57
  • if the link is in a block of text, the browser will want to put the link on its own line. i can float it, but if the link starts at the end of a line the block is still going to move down (blocks aren't split across lines of text like inline elements) – Jenni Aug 12 '10 at 15:58
  • Did you try inline-block ??? I always work that way and it works perfectly fine with me ... – Naruto Aug 16 '10 at 10:17
  • You were right. The `zoom:1` trick I used in IE6/7 has the same effect as `display:inline-block`. I never noticed the text wrapping problem before because I was using opacity in a tag cloud, where each link was very short text. you can see the text wrapping issue here: http://img689.imageshack.us/img689/3369/ieopacity.png (see how the semi-transparent text starts on a new line in the last screenshot?) – Jenni Aug 17 '10 at 19:51
  • @Naruto: Could you add the `display: inline-block;` tip from the comments right into the answer, because `display: block;` does not work. Thanks! (Also, +1) – Tomalak Nov 17 '10 at 13:10
  • @Tomalak I edited the answer to include the suggestions from the comments (not sure why you didn't... ;) ) – gnarf Jul 12 '11 at 16:38
  • @gnarf: Thanks. I'm not sure either. ;) – Tomalak Jul 12 '11 at 17:31