IE7.css is at 146 lines and counting…

How good is IE7? I was wondering about that today as I reloaded it to do another batch of bug fixing. The proof may be in your CSS pudding.

We are using conditional comments to import either ie6.css or ie7.css to control our hacks.



So far, the ie6 style sheet is 342 lines long, including lots of whitespace and comments. A good portion of that is for re-assigning gif background images instead of png. The rest is an assortment of invoking hasLayout, box model changes, and the ever-popular z-index bugs.

I copied this style sheet, commented everything out and began re-introducing the rules to build the IE7 style sheet. I ditched the gif and z-index hacks. The most common hacks are for hasLayout and double-margin float. I’m still using a set of hacks to re-configure my background images that are being measured from the bottom up.

So, how big is the IE7 style sheet? Right now, we are looking at 146 lines of code, including white space and comments. That’s still a hefty amount and I’m not done fixing bugs. Yes, IE7 is much better than IE6, but still a far cry from the others.

IE7 measuring sprites from bottom up?

I’m doing some IE7 hacking and was wondering what was going on with some of my sprites. They look fine in all of the browsers except IE7. For that lovely browser, I say with my teeth clinched, I’m getting really strange results. At first I thought it was a hasLayout issue, that I needed to do some messing around with the position:relative, or that it just didn’t like me.

However, while doing some troubleshooting, it looks like, please tell me I’m wrong, lE7 is measuring the sprite from the bottom up instead of the bottom down.

Here’s an example on Yahoo! Tech. You should see in the top product header 4 out of 5 blue stars for Pro Reviews and 5 out of 5 red stars for User Reviews. In IE7b, there are tiny nubbins from the tips of stars.

Here’s the background image (.png) for the pro stars and the normal CSS for 4/5 stars:

.bigprostars4 span {width:100px; height:20px; top:0; background:url(/images/bg-pro-ratings.png) no-repeat 0 -50px;}

I began looking at the numbers, thinking they were off by a few pixels. After doing some testing of the positions, I realized that it was not measuring 50px down from the top, as other browsers handle sprites, but starting at the bottom of the image and measuring 50px up! Hence, displaying the tips of the small stars.

To fix this I added this style to the IE7.css (currently not live!) file:
.bigprostars4 span {width:100px; height:20px; top:0; background-position: 0 -400px;}

This is not a small issue. If you use sprites as extensively as I do, this involves opening every image and re-calculating the distance from the bottom up and inserting these numbers in an IE7 only style sheet. Please, please tell me that I need to get another cup of coffee and I’m just dreaming this.

Update (05-02): Is this a position:absolute issue in IE7?

I’m still seeing this bizarre activity in the sprites of absolutely positioned elements. The sprites of links and other objects that are not positioned are working fine. sigh…

Update: IE7 passes sprite test (05-07)

I’ve created a test page to see if I could narrow down the issues with IE7 and sprites. I was surprised to find IE7 passed my initial tests. It must be a unique combination of styles causing my problem.

Add a conditional comment with XSL

This is probably one of those posts that I’ll use a million times and everyone else will say… that’s nice. Here’s how you create a conditional comment for IE6 with xsl. you need to use an xsl:comment and a cdata and don’t add any extra spacing.


IE6 only element, such as an image or css file

Hacking to fix for IE7

I’ve played around with IE7 for a while, but haven’t really started debugging with it until now. Fortunately, I’ve already set up the site to use conditional comments and deliver an IE6.css file and a separate IE7.css file. This has made it much easier to target the offending areas of the site.

IE7 has had a couple surprising problems for me. I have a topnav section that completely disappeared. The container div only has position:relative and inside are a number of floated elements. This actuall works great in all browsers… but IE7! No hacks for IE6, but hack for IE7! I went with the old adage, I think from Andy Budd, when all else fails float, if it’s already floated, unfloat. I added float:left to the container div and the topnav re-appeared from the IE7 void.

Munged Background Images

I’m using a series of positioning, text-indent, and background images on the site. Here’s a simplified version:


.targetdl dd {position:relative;}
.targetdl dd span {text-indent:-1000em; width:66px; display:block; position:absolute; top:5px; right:20px;}
.happy0 span {background:url(/images/happy0.png) no-repeat 0 -650px;}

IE7 shows the background image ok on some pages and on other pages, it shrinks the background image. I tried adding zoom:1 and font-size:100% to no avail. I’ll try line-height next. This is an odd bug, but not the first time I noticed it on IE7 betas. It certainly seems to be buggy with positioning.

De-bugging Strategy

Since I’ve already got a fairly solid ie6.css file, I’m going to use that as the basis of my IE7 CSS construction. After fixing the topnav, the rest of the ie6.css file is going into the IE7 css and rules will be removed one at a time. This should help me figure out what is still needed.

I’ll keep notes on this site as I find it a convenient place to remember them. Has anyone else come across some positioning bugs in IE7? Sorry, no screen shots or details at this time, we’re still pre-alpha stage.

Preparing for IE7 – Hacks and Conditional Comments

CSS filters and Hacks are so 2005

I think the future of CSS is not in hacks but looking seriously into using conditional comments. I’m saying this as someone that is trying to figure out the best approach for retrofitting older conversions.

Conditional comments are IE statements that say if IE6 or any other version, use this additional CSS file. Non IE Win browsers will ignore the comment.


Or is the version less than or equal to IE6


The Curveball

IE7 is going to throw a curveball worthy of a World Series ring. While it is easy and more convenient to throw a “ * HTML ” statement into a CSS, we need to start seriously looking at separating our hacks into different style sheets and intelligently using filters and conditional comments to refer to them.

Microsoft has announced that the IE7 browser will ignore past “ * HTML “ filters that were used to send styles only to Internet Explorer and will respond to child selectors: “ HTML>body “ which were used to hide styles from IE. Therefore, IE7 will see the style sheets just as every other modern browser.

Will this be an issue?

If IE7 fixes its display problems, we may not have to make any changes to our legacy CSS. However, if IE7 brings new bugs to the table, we can no longer use filters to whisper in its ear. Conditional comments will be the answer.

I’m dreading the idea of inserting conditional comments into the head sections of HTML pages. I’d like to insert it into the main.css file that imports more sophisticated styles. I have been overwhelmed lately and haven’t been able to test any answers to this. Does anyone have a suggestion?

Imagine teasing someone that their CSS is “So 2005!” Did I just coin a term? Has Joe Clark already coined this one?

Resources

— This post was originally published on www.tdrake.net