CODEWITHSUNDEEP
htmlcssinternet-explorer-8
User1979
User1979

Reputation: 857

:hover doesn't work well on IE8

HI i have a small Problem with my :hover CSS code. On IE8 my link hover just when i move mouse over text but outer text it doesn't work. I don't really know where my mistake is. Need some help!

html:-

<a href="#" class="ctaBlock" name="">text text text</a>

CSS:- 

.ctaBlock {
  border: 1px solid #333;
  font: 400 10px/43px arial,helvetica,sans-serif;
  color: #333;
  letter-spacing: .1em;
  display: inline-block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  line-height: 42px;
  width: 34%;
}
#content .ctaBlock:after {
 font-size: 7px;
 font-weight: 400;
 line-height: 1;
 font-family: iconFont;
 font-smoothing: antialiased;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: greyscale;
 font-style: normal;
 font-variant: normal;
 letter-spacing: normal;
 text-decoration: none;
 text-transform: none;
 content: '>';
 display: inline;
 margin-left: 3px;
}
#content .ctaBlock:hover {
 background:rgb(255,255,255);
 background: transparent\9;
 background:rgba(255,255,255,0.3);
 filter:progid:DXImageTransform.
 Microsoft.gradient(startColorstr=#4cffffff,endColorstr=#4cffffff);
 zoom: 1;
 text-decoration: none;
 cursor: pointer;
}

Upvotes: 0

Views: 85

Answers (2)

Jibbow
Jibbow

Reputation: 757

IE8 has some problems handling transparent parts of elements. I had the very same problem a while ago and I solved it by adding a transparent image (1px by 1px) as background in CSS:

background-image: url("transparent.png");

Or with a data-URL:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wgUEhgsb9YM9wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADUlEQVQI12NgYGBgAAAABQABXvMqOgAAAABJRU5ErkJggg==);

I think an even simpler solution could be adding a non transparent background color to your link. But this depends on your needs of a transparent background. I havn't tested the second solution, but you could give it a try.

Upvotes: 1

Sahal Tariq
Sahal Tariq

Reputation: 219

opacity property does not work in IE8. add this background:rgb(255,255,255); and then add opacity:0.8 separately at the end. Or it would be better if you use hash color code.

Upvotes: 0

Related Questions