/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Browser specific CSS

Copy linkTweet thisAlerts:
Jan 21.2009

I need to load a separate CSS file for IE (because it sucks!). I’m having a problem with my layout in, of course, IE. I’m having to move elements down the page as much as 100px for IE. Also under my footer it leaves about 50px of white space(again ONLY in IE). Any suggestions would be appreciated. Currently I just deleted my footer and will add it later.

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991Jan 21.2009 — [url=http://www.quirksmode.org/css/condcom.html]Conditional comments[/url] are the best way to feed content to IE only.
Copy linkTweet thisAlerts:
@rnd_meJan 22.2009 — Conditional comments break validation with their "is not ie" syntax.

a web designers trick can avoid validation problems:

[CODE]/* css selector ie vs w3 example */

fieldset {padding-top: 0.5em;} /* for ie */
html>body fieldset {padding-top: 0.2em;} /* again for other browsers */[/CODE]
Copy linkTweet thisAlerts:
@kaiser0427authorJan 22.2009 — thanks for the responses. I'll study up on this and apply it.
Copy linkTweet thisAlerts:
@toicontienJan 22.2009 — Conditional comments break validation with their "is not ie" syntax.[/QUOTE]

As far as I know, the markup validator, and non Internet Explorer browsers, all view Internet Explorer Conditional Comments as HTML comments, and thus ignore them.

A site I worked on, Motortopia.com, uses conditional comments:
[code=html]<!--[if lt IE 7]>
<style type="text/css" media="screen">
@import "URL here";
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css" media="screen">
@import "URL here";
</style>
<![endif]-->
[/code]
When running Motortopia's markup through the validator, it makes no mention of invalid comments or other problems associated with the conditional comments above.
Copy linkTweet thisAlerts:
@FangJan 22.2009 — Conditional comments do validate; they are simple block comment tags to all browsers, except IE.

The child selector hack (html>body) will only work in IE6 and lower. Avoid using all hacks.
Copy linkTweet thisAlerts:
@Declan1991Jan 22.2009 — Don't use hacks, use conditional comments instead, and let they are just treated as comments by other browsers.
Copy linkTweet thisAlerts:
@rnd_meJan 22.2009 — 
When running Motortopia's markup through the validator, it makes no mention of invalid comments or other problems associated with the conditional comments above.[/QUOTE]
i hope so.

those are both "is ie" comments, not the ones i said would break validation...

for example, validate this:

[CODE]<![if !IE]>
<style type='text/css'>
body { color: black }
</style>
<![endif]>[/CODE]

if you use just the "is ie" ones, conditional html comments are a good thing, and i don't really care about validation for my purposes.

you will have to watch your cascading a little more closely using cond coms...
Copy linkTweet thisAlerts:
@toicontienJan 22.2009 — With a little tweaking, you can get it to work:
[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<!--[if !IE]> -->
<style type='text/css'>
body { background-color: black }
</style>
<!--<![endif]-->
</head>
<body>

</body>
</html>[/code]
Internet Explorer 6 shows a white background to the page, while Firefox 3 shows a black background, as does Opera 9. This also validates as HTML 4.01 Transitional.
Copy linkTweet thisAlerts:
@rnd_meJan 23.2009 — With a little tweaking, you can get it to work:

Internet Explorer 6 shows a white background to the page, while Firefox 3 shows a black background, as does Opera 9. This also validates as HTML 4.01 Transitional.[/QUOTE]

that's good news. i wonder why i had it in my head it invalidated the page. maybe it's a strict thing...

i will update my snippet database. thanks for the info!
Copy linkTweet thisAlerts:
@felgallJan 23.2009 — There is nothing in that code that would stop it validating as strict. It is just HTML with comments in it as far as the validator is concerned.

It is only the versions without the dashes that don't validate because browsers other than IE then see it as an invalid tag rather than as a conditional test.
×

Success!

Help @kaiser0427 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.8,
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,
)...