SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Generated content on A element not working in IE

    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.)

    Code:
    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. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I tried it in IE9 and the video loaded in a page of its own (after a few minutes ) 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:

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •