Internet Explorer
Fix your Javascript Print Style Switcher for Internet Explorer
Monday, February 19th, 2007 | Browsers, CSS, Code, Design, Internet Explorer, Javascript, Programming, Web Development, Websites, Windows | 4 Comments
So you’ve decided to use javascript to swap out a print style css sheet that basically hides a bunch of divs and maybe widens the content area. Perhaps your re-color the links and the text and fix the font sizes.
You try it in Firefox and it prints perfectly, but when you print in IE, you’ll notice IE didn’t really print your printable version.
So you think, ‘Ok I’ll add media=”print” to my stylesheet link!’ and then you refresh your page, try your Print this Page link, and nothing happens! And it still prints the wrong version! What to do?
Well, your old pal Joe here figured it out.
Here’s what you do:
- Create a separate stylesheet called print.css
- Add this code to your master stylesheet:
@media print {@import "print.css";
}
- Implement your javascript for making the stylesheet override your master stylesheet
- Test
- Enjoy!
This allows you to switch to your print style so it is preview-able before printing and also tells IE to use print.css when it prints a page on your site. So incidentally, if a user just clicks print in IE without switching to your style, they will still get your printable version. I suppose this might cause confusion but considering the most reasons for making hard copies of digital information, it probably shouldn’t pose too much of a problem for your average user.
Now if your user wants to have a pretty print out of your website because they can’t access a computer to show it to someone else away from home, they’ll probably get stuck with the fact that IE does not print background images and colors by default any way.
CSS for IE 6 and 7 with no hacks
Tuesday, January 16th, 2007 | Browsers, CSS, Internet Explorer, Programming, XHTML | 8 Comments
UPDATE
Since the time of this writing I have learned some important things:
- With correct doctypes, IE6 almost always renders the same as FFX and IE7, except when it comes to PNGs.
- If you set your body’s font-size to 62.5%, you reset browsers to 10px.
Eric posted about this some time ago, but I really think this is one of the most unique methods I use in my coding process. I’ve yet to see this idea brought up by most sites I browse for CSS/XHTML solutions. The idea is that you can use pure XHTML in conjunction with conditional comments to create a CSS style sheet that is free of your usual hacks. The reason we found this out is because the people on the IE 7 dev team actually managed to bring their new browser into closer range for compliant style rendering. IE 7, for the most part, follows the box model pretty well, and ignores the usual string of hacks we use in our CSS.
Before we learned about conditional comments, we were using an underscore to rewrite any definitions that IE 6 needed to render our code correctly. The most common fix was usually to the width attribute. Add your padding back. Well, no more underscores. Here’s what you do:
When you create your body tag, write it as so:
<!--[If lt IE 7]>
<body class="ie6">
<![endif]-->
<!--[If IE 7]>
<body class="ie7">
<![endif]-->
<!--<![If !IE]>-->
<body>
<!--<![endif]>-->
OK, so what is this mess, you wonder. This is code that only Internet Explorer since v5.5 understands. Microsoft did a good thing by adding this functionality so that web developers like us can fix our coding problems without hacks. Essentially here’s what it says in order from top to bottom:
If Less Than IE 7 then read: <body class="ie6"> If IE 7 then read: <body class="ie7"> If NOT IE, then read: <body>
Since the first two statements are commented out, all browsers except IE ignore the HTML inside the comments. The last statement is commented it out, as well, but the HTML: is not. This is actually a twist on down-level revealed comments. The tags supplied by MS in the link above would have you use <![If !IE]>. This tag is not valid XHTML. All we did was put comments around it. IE still understands, and the code is perfectly valid. IE will skip that tag, no other browser will. Everyone is happy.Here’s how you use it in CSS:One thing I noticed is font sizes in IE tend to be bigger than Firefox. Here’s what I usually do at the top of my CSS files:
body{
font:normal 1em Arial, Helvetica, sans-serif; }
body.ie6, body.ie7{
font-size:0.9em;
}
Starting my stylesheets with this declaration almost always guarantees my fonts will be the same size on Firefox, IE6, and IE7.
And of course, if you need to fix a width problem due to improper box model:
.bigdiv{
width:140px;
padding:0 5px;
}
body.ie6 .bigdiv{
width:150px;
}
Using body.ie6 as the parent selector will cause .bigdiv’s new width to only be implemented by IE 6.
You may read Eric’s post and notice he didn’t differentiate between IE 6 and 7 in his comments. Since his post, I’ve come to find that sometimes IE 6 needs fixing, sometimes IE 7 needs fixing, and sometimes they both do. That’s why I’ve chosen to differentiate between them in my body sub classes.
Search
Tweetin'
- @SahSahSarah oh man, yea.
- RT @the_gordon Cyclist killed in crash in Okemos, MI this morning http://tinyurl.com/y97dyf5 It is a terrible thing : (
- The link I just retweeted from @rjs is now required reading for tech folks, according to me.
- RT @rjs: Totally agree with these points about how iPhone OS is (wisely) killing the filesystem: http://bit.ly/bJ8typ
- .@lizannakersjes CORRECTION: talking to me on the phone while I rode my bike was the best birthday wish