treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] :before not working correctly in IE8+

  • Hello,

    first off a Happy New Year 2013 !

    I am new here but found some good discussion so I hope to get an answer to my problem.

    I have build a website which functions correctly in Chrome, Safari etc.

    In IE8 and 9 im having problems:

    I use Joomla 1.5 as vehicle (I know a bit old)

    for general layout see www.kringloopbedrijfoss.nl though this site does not have the changes yet on which i have the problem.

    I have a header block which is filled with a random image and on top of that image is a variable text generated out of a set of articles. Joomla 1.5 generates a table there with contents.

    The text should be preceded by a graphic block and for that I use the :before switch with content: url(image.gif) and some positional stuff, so position: relative etc

    CSS:

    #head_content .contentpaneopen:before{
      position: relative;
      left: -28px;
      top: 26px;
      float: left;
      content: url(../images/blockchar23.gif);
    }
    

    If I use this in IE8 somehow it generates a style where

    content: url(../images/blockchar23.gif); TOP: 26px
    

    is shown in the code inspector.

    If i put the content in a different CSS declaration with the same ID/class it goes OK. Might be Notepad++.

    But still the blockchar doesnt show.

    the div#head_content has a z-index of 1 because I place a blue opaque background over the head image for design purpose.

    I can provide more code but I am not sure if thats appreciated here.

    Hope I make some sense.

    Thank you

  • Maybe these could structured as an unordered list, then you could use

    ul.style { list-style-image: url(../images/blockchar23.gif) ; }

    or, probably better, a background image, as detailed here: http://css.maxdesign.com.au/listamatic/vertical05.htm

  • Have styled it like the background-image as detailed on maxidesign. Works like a charm! Thank you.

    No hassle anymore with not working z-index on :before.