css content property is not workinng in ie7

Question

0.00/5 (No votes)

See more:

CSS

.arrow:before {
           content: url('../images/Popup.gif');}

CONTENT PROPERTY IS NOT WOKING IN IE7 PLEASE TELL ME ALTERNATIVE TO CONTENT BUT IT IS WORKING IN IE8 BROWSER COMPATIBILITY ISSUE MY APPLICATION WILL WORK IE7 AND ABOVE VERSIONS

Posted 1-Apr-15 23:54pm

Member hani

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Solai Raja · Answer 1 · 2015-04-02T00:11:00

Solution 1

.arrow:before

:before, :after.. etc are CSS 3.0 version, so it not supported on IE7,
for CSS 3.0 supported partially in IE 10.

check here

Posted 2-Apr-15 0:11am

Solai Raja

Comments

Member hani 2-Apr-15 6:35am

there is no alternative to dispaly image in ie7?

Solai Raja 2-Apr-15 6:54am

you have <img> available on html

Member hani 2-Apr-15 7:07am

in css img is not working

Solai Raja 2-Apr-15 7:14am

img src="../images/Popup.gif", i am saying that HTML tag check this

Member hani 2-Apr-15 7:20am

but i want to display in css how? there is no scope to apply in html , actually the :before is not applying if i remove then my styles gone what to do?

Solai Raja 3-Apr-15 0:16am

there is no alternative for :before and :after for IE7. or you can use background-image property

hypermellow · Answer 2 · 2015-04-02T00:31:00

In addition to Solution 1, that correctly explains why you are seeing this issue in IE7.

IE8 provides partial support for :before and :after pseudo-elements[^]. This explains why you are only experiencing this issue in IE versions < 8.

This css feature was introduced as part of CSS2.1[^].

To replicate this functionality in IE7, try using the Moderizr [^] library.

After including the library to your page, the below snippet should replicate you css in IE7.

JavaScript

if (!Modernizr.generatedcontent) 
{
    $('.arrow').prepend('<img src="../images/Popup.gif" />');
}

... hope it helps.