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.

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.

Hedger Wang is God! – well a guru at least.

Hedger Wang responded to my desperate plea for help on the z-index issue with a simple test page on his blog with an ingenious iframe solution. How people imagine these solutions is simply beyond me. So, then I started going through his blog and was blown away by his tests and solutions. CSS, JS, AJAX, you name it, this is a goldmine on info.

Conflicting Z-Index in IE6

Internet Explorer 6 has an issue with positioned elements that use z-index. Here’s the trouble I just had with this:

I have a topnav consisting of an unordered list with a dropdown menu on one of the list elements. The dropdown is a nested unordered list with position:absolute and a z-index to sit on top of any page content below. Fairly simple so far…

However, in IE6, the menu is obscured by an h5, random images, and paragraphs on various pages. The z-index should make this list float on top of other elements, but it seems to be ineffective.

PPK summarized this problem on his post: Explorer z-index bug:

It appears that in Internet Explorer (windows) positioned elements do generate a new stacking context, starting with a z-index value of 0, causing the lime-green box to appear above the yellow box.

This is a serious violation of the CSS specifications, causing headaches and a lot of misunderstanding of what z-index really does.PPK

While crediting Aleksandar Vacić for first reporting this bug, PPK doesn’t mention Aleksandar’s simple solution. Give the parent a position:relative and z-index:1..

Now, of course it isn’t always that simple. There’s also the issue of subsequent objects that also have a z-index and what happens if their parent is also positioned with a z-index. Please take some time to visit Aleksandar’s web site if you are having this conflict.

IE7 and more fun

According to PPK’s web site, this has not been fixed in IE7 Beta2Preview. We’ll see how this works out. I’ve noticed some positioning bugs in IE7 myself. This is something to consider when considering the z-index happiness of Andy Clarke

More solutions

Hedger Wang has an ingenious solution to the conflict between z-index on elements and subsequent select elements. He uses an iframe with z-index-1 that sits under the targeted element. I’ve used this negative z-index on some of the subsequent elements and it is helping. Fixing all of the pages will be a long journey , but at least there is light at the end of the tunnel.

Yet another hack/update

I had to remove the negative z-index from the container as it was keeping a link with background image/text-indent, display:block, etc from having any hover activity. It acted as if it were under a layer. Other links in the container were fine. You’ve got to love IE6

Yet another hack/update 4-30-06

We were using an iframe with the src=”/”. Can you guess what happened? Oh my goodness. We were loading the home page inside every other page on IE. So here’s the tip we learned… don’t use a page url for your invisible iframe, use an spacer.gif or something benign instead. Better yet, get rid of the iframe if you find other solutions. Which is what we ended up doing. We’ve messed with this thing for so long we’ve lost track of what’s doing what.

Reblog this post [with Zemanta]