/    Sign up×
Community /Pin to ProfileBookmark

browser-based css within a sheet

Copy linkTweet thisAlerts:
Jul 14.2006

Hi, I have a stylesheet and I need to use this particular one. I can’t have one for IE and one for non-IE — I need just one single css file (for reasons such as stylesheet swapping). Anyway… I want to have rules in my CSS file based on the browser. The main problem below:

[CODE]
/* IF IE USE A GIF */
<!–[if IE]>
#corner { background: url(/img/flag.gif) top left no-repeat;
}
<![endif]–>

/* IF NOT IE USE A PNG */

<!–[if !IE]>
#corner { background: url(/img/flag.png) top left no-repeat;
}
<![endif]–>
[/CODE]

I tried this and it doesn’t work. I want to show the png image for non-IE and the gif image if it’s IE. I cannot apply the !important rule to the png as to block out IE from it because I have a JS that will allow people to swap the CSS, so I need to do it using some sort of “if else” thing. If I use the !important hack, when they swap to the other CSS file, the iamge won’t change because the !important will stay priority.

When I tried the above code, the image didn’t show up in either case, IE and in Firefox. Just to clarify, this code is inside the CSS file. I cannot have separate files for IE and non-IE, so I need these rules to work within the .css

Any ideas out there?

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelJul 14.2006 — That is a very well thought-out and adequately articulated question. I am not sure, but it looks to me as if your second IE statement isn't needed or maybe does not function. What is "<!--[if !IE]>" (the exclaimation point)? Is this even valid (anyone?). I know about priority. I'd think it should be 'priority-do this', not 'priority-do [I][B]NOT[/B][/I] do this'.

What about making the *gif background be common/default and [I][B]then exclude[/B][/I] IE in favor of the conditional statement for the *png:

I would suspect that you'd write as follows:

[code=html]#corner {background: url(/img/flag.[B]png[/B]) top left no-repeat;} /*for ALL browsers*.

<!--[if IE]>/* for IE-only because IE can't handle *png images properly */
#corner { background: url(/img/flag.gif) top left no-repeat;
}<![endif]-->[/code]

and leave-out that whole

(if NOT IE )

<!--[if !IE]>

#corner { background: url(/img/flag.png) top left no-repeat;

}

<![endif]-->

-Tell the browser what it [B]IS[/B], not what it [B]ISN'T[/B]...
×

Success!

Help @bostonmark spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...