Right in the Mean Bean Machine

I consider myself pretty well versed in the art of standard compliant css layouts. Somehow I’ve picked up enough about CSS to be considered an expert around the office. I routinely get asked all sorts of questions about how to do this or that with css by my co-workers. I take a humble approach to this position, but I really enjoy it when I can answer their questions.
Things aren’t always so happy-go-lucky though in my dealings with cascading style sheets. This is usually due to a particular inappropriate expletive browser that routinely likes to hit below the belt. Lemme give you a rundown of two swift kicks I received from Internet Explorer in the last 24 hours:

Blow Number 1:

The programmers were trying to create a tableless progress-bar control to work into the Fileyeti interface we created. The idea is pretty simple. We would have a an empty div that’s set to a specific width and height with a background image that has it’s position set dynamically based on the particular statistic we wanted to show.

In exploring this solutions we found the following IE inconsistency:

1. In other browsers besides IE, this div renders 2px high as specified. In IE, it shows up 19px tall…try it out.

   Rendered:

   HTML:

   <div style="border:1px solid black; height:2px;"></div>
   

2. In this example, we set the line-height to 0 which allows IE to render it correctly at 2px tall.
   Update:But not in this blog entry for some reason. Try cutting and pasting the html below into a blank html page.

   Rendered:

   HTML:

   <div style="border:1px solid black; height:2px; line-height:0;" ></div>
   

3. But… Once we add a background or background image – BAM! She’s back to 19px again!

   Rendered:

   HTML:

   <div style="border:1px solid black; height:2px; line-height:0; background-color:red;"></div>
   

4. Toss a 1px square image in there (it doesn’t matter if it even exists), and you’re back down to 2px again.

   Rendered:

   

   HTML:

   <div style="border:1px solid black; height:2px; line-height:0; background-color:red;">
   <img src="0.gif" height="1" width="1" alt="this image doesn't even exist!" /></div>
   

5. Oh, but wait… there’s an alternative:

   Rendered:

   HTML:

   <div style="border:1px solid black; height:2px; line-height:0; font-size:0; background-color:red;"></div>
   

Blow Number 2:

This one made me feel like going back to last week
to figure out when I missed the boat. With most of the sites I develop at work, I try to limit myself to linking to one stylesheet from the html pages. That stylesheet exists to lay down some basic rules for all browsers, and then imports the layout stylesheets so that browsers incapable of doing so (like Netscape 4.x) cannot muck up the page. Well I tried something new with one particular site. I wanted to import a stylesheet specifically for print after all the layout had been established, so that I could rearrange the layout divs a little to make it look nice when printed. Now this is a CSS2 technique, so I knew I could possibly have some problems, but the proper way to do this was to add the media type after the url like so:

@import url("stylesheetname.css") print;

I was so happy when I opened up the print preview window in Firefox and printed to see that it behaved exactly as I wanted. When I opened up IE6 however, No Dice. So then I set my imported layout stylesheet to screen using the same method and the page looked completely unstyled. After some Googling, I found that
Internet Explorer WILL NOT import a stylesheet with a mediatype different from “all”. OUCH!

The workaround for this one was pretty simple. Being as inconsistant as IE is, I thought “Hey, if
it doesn’t like one CSS2 spec, let’s try another one!” Another way to set media types in CSS2 from
within a css document is to wrap them in a media block like this.

@media print {
   #page {
	   width: 85%;
	   }
}

Sure enough, Internet Explorer printed the page correctly after I cut all of the css from my
print stylesheet and pasted it into my new @media selector at the bottom of my layout stylesheet. AAAAARRGGGHHHHH! Why can’t everybody just use browsers that WORK!