Generated content on A element not working in IE

HTML & CSS
1

The site I’m working on is here > http://www.activeinternational.com/MEXOP/

To recreate the problem, click on the blue box that has arrow pointing to the right. That will open a lightbox video player. At the bottom right hand corner of the player window you should see a the text “Cerrar”.

It shows fine in Chrome, Firefox and Safari. However, on IE, its a no show. What gives?

Here’s the css I’m using (many of the rules are just for tracing the layout in IE to confirm the anchor element is present.)

a#mbCloseLink{
background:none !important;
border:1px solid #fff !important;
display:block !important;
height:20px;
width:100px;
zoom:1
}

a#mbCloseLink:before{
content:'Cerrar';
height:20px;
width:100px;
}
2

Which version of IE? IE7 and bellow (or even IE8 if you happen to be in IE7 compatibility mode) don’t support :before/:after pseudo classes.

BTW, why would you generate content this way for a link?

3

Hi Dresden, the browsers I’m speaking of are IE9 and IE10.

I’m just inheriting a mess which is why I’m trying to make do with generated content. The “close” button was originally an image in which the text was in English. In order to do a quick replacement to convert this to spanish text, I’m using generated content.

If you look at the page URL I sent, and click the box to pop the video window up, you’ll see that the close button replacement text appears fine in all browsers except IE8-10.

4

I tried it in IE9 and the video loaded in a page of its own (after a few minutes :rolleyes: ) so I’m not sure what to say about that.

But what I would say anyway is that with the :before content being set to position: absolute, it might help to give it more specific positioning context, perhaps by giving its parent anchor position: relative:

a#mbCloseLink{
background:none !important;
border:1px solid #fff !important;
display:block !important;
height:20px;
width:100px;
zoom:1; 
[COLOR="#FF0000"]position: relative;[/COLOR]
}