Grow your CSS skills. Land your dream job.

:before not working correctly in IE8+

  • # January 3, 2013 at 10:28 am

    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 http://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

    # January 3, 2013 at 1:13 pm

    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

    # January 4, 2013 at 6:10 am

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".