CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.
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
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.
Maybe these could structured as an unordered list, then you could use
list-style-image: url(../images/blockchar23.gif) ;
or, probably better, a background image, as detailed here:
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.
You must be logged in to reply to this topic.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed