displaying image and text within the same DIV through content

Question

I am creating a print CSS for IE browser, within which I have to add text and an image in a div through CSS. I am using content to add text and background to add an image, but somehow Image is not being shown.

This is how I'm doing.

#header .container:after { 
        content:  "@The_Text_after_Twitter_Logo";
        background: url("../path_to/logo-twitter.png");
        position:absolute; 
        width:999em; 
        height:25px; 
        margin:0 0 0 5px; 
}

Is this the right way to do it? Am I doing it wrong somewhere?

Thanks.

score 0 · Answer 1 · answered Oct 17 '13 at 13:38

0

:after is a empty pseudo-class in IE, meaning it comes with no pre-defined box-model and you'll need to give it some display.

display: block;

This should do the trick.

answered Oct 17 '13 at 13:38

Jamie Hutber

26,790
46
179
291

sadly, it didn't help Jamie. – Steve Oct 17 '13 at 13:42
can you whack up an example? maybe a JS fiddle? – Jamie Hutber Oct 17 '13 at 13:49
I created a JFiddle and it works there :/ but it doesn't work in IE8's print review. :( – Steve Oct 17 '13 at 13:57
Are you using a print style sheet? `@media print { … }` – Jamie Hutber Oct 17 '13 at 13:59
Yes. It's for the print. – Steve Oct 18 '13 at 04:51

displaying image and text within the same DIV through content

1 Answers1