Found a way to write IE7 specific CSS

HTML & CSS
1

Found a way to write IE7 specific CSS

<style type="text/css">
@import url("ie.css");
@import url("main.css") all;
</style>

It appears that IE7 doesn’t supports “all”, so only the first css will be parsed.

Great success.

2

I’ve not tried that out but I wouldn’t recommend it.

Personally, I never have to include an IE7 specific stylesheet as in most cases if you use a doctype and write your code using web standards then in most cases it’ll behave in the same way as Firefox, Opera and Safari.

You may need a few haslayout fixes but that’s well documented and easy to solve.

If you still insist on including a separate CSS file for IE7 though then the recommended method is conditional comments

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" media="all">
<![endif]-->

Hope that helps.

3

I wouldn’t use it either. 99.5% of the time there’s no need to serve code to IE 7 that other browsers wouldn’t require anyway; usually all that’s needed is an adjustment in the code that was written in the first place.

4 

Found a way to write IE7 specific CSS

If I’m not mistaken then that rule will also exclude IE6.

Here’s a test:
http://www.pmob.co.uk/temp/import-test.htm

Both ie6 and ie7 ignore the css.

5

IE6 and IE7 actually look for a file whose name includes the media types. You will get a lot of 404’s in your error logs with this method.

6

As csswiz said, just use the conditionals - then you can include special css for ie6/7 (or both) as needed.

7

The conditional comments idea seems to be bringing in another stylesheet anyway.

Is there any way to do this with just one stylesheet? Before IE7, this was easily done. I could keep IE6 in Strict mode, but feed it other styles within the single stylesheet using either stars or CSS signatures or child selectors/combinators…

I saw someone once use conditionals to wrap an invisible table around en element that needed to act visually like a table (height of a single child setting the total height, expanding to accomodate content…). Is this a better way??

(I’ve got a menu that I would like to keep a menu, but currently want to act like a table… and IE doesn’t understand display: table so I’d like to feed the smarter browsers the better-working display: table and give IE the not-quit-as-good float model, as well as have the freedom to change the thing entirely on the print.css which I couldn’t get easily with a real table.)

8

Hi,

You can of course hack it if you want but its never a good idea to hack a live browser though.

A simple ie7 hack is as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
p{background:red}
* html p{background:blue}
*+html p{background:green}
</style>
</head>
<body>
<p>This will have a red background in all browers except IE.</p>
<p>IE6 will have a blue background</p>
<p>IE7 will have a green background</p>
</body>
</html>

Of course you never know what IE8 might do and whether IE7 will get fixed some time (unlikely).

Conditional comments are the safest bet but I agree that managing multiple stylesheets is a headache at times.

9

Ah, yeah! I saw something like that a month ago but with some extended first-child thing added on… and had totally forgotten about it because I kept thinking I want all IEs.

I’m hoping IE8 acts like MOS. (fingers crossed).

If the design didn’t need the whole table-flexibility, I’d have every browser have what IE would show anyway, just left-floated li’s with a width of 19%, which just doesn’t quite do the job…

Thanks, I’ll just have to think on this one and make a decision which perilous road I want to take… : )

10

All my pages look like this:

<body>

	<!--[if lte IE 6]>
		<div id="isIE_version_LTE6">
	<![endif]-->
	
	<!--[if IE 7]>
		<div id="isIE_version_7">
	<![endif]-->
	
		[PAGE CONTENT GOES HERE]
	
	<!--[if IE]>
		</div>
	<![endif]-->

</body>

For any styling that needs to target IE7 or other versions, my CSS (which all goes in one file) then looks like this:

.someclass {
      [rules for someclass]
      }

#isIE_version_7 .someclass {
      [additional rules for IE7]
      }

#isIE_version_LTE6 .someclass {
      [additional rules for IE6]
      }

Personally, I prefer this to including separate stylesheets because:

[LIST=1][]The page only needs to load the one stylesheet, and
[]The browser targeting rules go right after the rules they modify, which I find makes it easier to maintain the stylesheet.
[/LIST]

11

Hmmm, I might be able to do something like that. <!–[if lte IE 7]>… extra div wraps around this menu… <![endif]–>

So long as IE8 adds display: table : ) I haven’t had to go back and undo anything yet for when IE7 came out… I hope to do the same when 8 is out.

12

I guess i´m “unlucky” then. I have [COLOR=“DarkRed”]this[/COLOR] issue with IE ( in firefox renders well ) that i can’t solve.

13

I just looked at it in IE 7 and Opera. They both look identical to me. Tell you what. Start a new thread in the Web Page Design board explaining what the problem is and I’m sure someone will be along shortly to answer it (I need to head to bed).

14

There are just a bunch of minor padding or margin differences (make sure you’re overwriting the browser defaults), nothing to worry too much about but as Dan said, open another thread for this.