CSS Pseudo Elements: Before &: After Working Differently in Internet Explorer

Question

I have a very specific problem as I try to create navigation with corners using pure CSS without images or javascript. I realized that it works just fine, but the problem I am facing is that IE 9 and Chrome are different from each other. I can make both work by changing the fields of the pseudo-elements, but I would prefer that one solution work in both. If anyone can understand why the fields are different and give me one CSS solution to work in both browsers, that would be great. Otherwise, I will have to add a separate class for IE and make it work using a separate CSS entry.

Here is jsfiddle for working with arrow-nav

Here is the HTML

<ul> <li><a href="#" >Some Navigation</a></li> <li><a href="#">More navigation</a></li> <li><a href="#">Another Nav</a></li> <li><a href="#">Test Nav</a></li> <li><a href="#">A Test Navigation</a></li> </ul> 

CSS

 ul { float:right; list-style-type:none; margin:0; padding:0; width: 300px; } ul li a { float:left; width:300px; } ul li{ float:left; width: 300px; height:50px; line-height:50px; text-indent:10%; background: grey; margin-bottom:10px; border:1px solid black; } ul li:before { content:""; position:absolute; margin-top:-1px; border-top: 26px solid transparent; border-bottom: 26px solid transparent; border-right: 21px solid black; margin-left:-22px; } ul li:after { content:""; position:absolute; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 20px solid grey; margin-left:-320px; } 

Answer 1

You can fix this by using absolute positioning on pseudo-elements. To make this work correct, set the position of ul li to relative (which will cause the elements located absolutely inside it to relate to li). Then update the position of the pseudo-elements to use left instead of margin-left :

 ul li{ position: relative; // Add this. float:left; width: 300px; height:50px; line-height:50px; text-indent:10%; background: grey; margin-bottom:10px; border:1px solid black; } ul li:before { content:""; position:absolute; margin-top:-1px; border-top: 26px solid transparent; border-bottom: 26px solid transparent; border-right: 21px solid black; left:-22px; // Update from margin-left to left } ul li:after { content:""; position:absolute; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 20px solid grey; left:-20px; // Update from margin-left to left } 

http://jsfiddle.net/ryanbrill/jSdWR/5/

Answer 2

You need to specify the position for the elements (for example, the top and left values). And for some reason, that I don’t quite understand is to add position: relative to li (and not to ul ):

http://jsfiddle.net/jSdWR/4/