CODEWITHSUNDEEP
htmlcssinternet-explorer-8
Ghan
Ghan

Reputation: 70

:after element's content not taking background:inherit; in IE8

I have a link in html and i am using :after pseudo element to insert some content and style that content. It is working fine in FF & IE9. but not working in IE8.

when i click on "Click" link, container div's background color changes. but content inserted by :after not takes that color as background in IE8.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">     </script>
<script type="text/javascript">
$(function(){
  $(".clickMe").click(function(){
  $(".yellow").addClass("red").removeClass("yellow");
});
});

</script>

<style>
 .testLink {
   display: block;
   width: 109px;
   background: inherit;
   max-height: 32px;
   overflow: hidden;
}

.testLink:after {
  content: "...";
  background: inherit;
  position: relative;
  width: 45px;
  margin-left: -20px;
  padding: 0 5px;
  background-image:none;
  background-color:inherit;
  font-size: 14px;
 }
.yellow{ background:yellow;}
.red{ background:red ;}

</style>
</head>
<body>
  <div class="yellow">
     <a href="#" class="testLink">linkTextHere</a>
  </div>
  <a href="#" class="clickMe">click</a>
</body>
</html>

Any expert advice would be appreciated. thanks in advance..

Upvotes: 0

Views: 112

Answers (1)

Ria Weyprecht
Ria Weyprecht

Reputation: 1285

Take a look at the browser support of inherit for IE8

http://www.w3schools.com/cssref/pr_background-color.asp

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".

So they seem to have a general problem with it considering the Doctype. Maybe try a different one than html5 just to make sure?

Upvotes: 1

Related Questions