Tag Archives: CSS

Internet Explorer Truncates Long CSS Files

I came across an interesting quirk in Internet Explorer a couple of days ago whilst working on a project for a client.

There is a section on their website that has an extensive set of stylesheets that is around 3,500 lines long. Combined with the stylesheets for the rest of the website, the total is about 6,500 lines.

The design was all finished and looked great in Firefox, Chrome, Opera, IE 7 and IE 8. However, then I did up the set of styles I mentioned that ended up totalling 3,500 lines. Due to the way I lay out my stylesheets, these started at about line 2,000. Which meant about 1,000 lines were after them.

While I’m working on something new I test in Firefox with Firebug and then once I’m finished I adjust for IE. So all of a sudden when I tested in IE 7 and 8, they are not displaying things correctly, including things in the design that were working previously. Using IE’s built in developer tools I was able to see that there were stylesheets simply not being applied to things that they should have been after about the 4,500 – 5,000 line mark. The entire stylsheet was loaded though and could be viewed.

I began tweaking things in the IE specific stylesheet since I couldn’t get it to work by editing the regular stylesheet. Once I realised that I could copy things directly from the main stylesheet into the IE one and it worked without tweaking, I started to think something odd was going on.

Cutting the extra 3,500 lines out put the site back to normal in IE, except for what those things affected.

If I put those lines in a separate stylesheet, everything worked perfectly fine again.

So it seems to me that for some reason IE just will not read more than around 4,500 to 5,000 lines in a stylesheet. It could perhaps also be total characters, however I didn’t test to find at exactly what point it stopped reading so I can’t be sure.  Fortunately, simply adding in an extra stylesheet did solve the problem, and given the nature of the extra CSS, it probably should have been done that way in the first place so that it could be loaded solely on the pages that actually need it. It should be noted that the total lines are still the same, they are just split between two stylesheets now, one of which is only loaded on certain pages.

I did a quick search for this but didn’t really come up with anything similar elsewhere, so if you have had a similar issue, I would love to hear about it!

It seemed to be consistently about the same place in both IE7 and IE8, so hopefully it won’t find it’s way into IE9.

CSS Clip Property

I recently came across the clip property on the Web Designer Wall, it’s a property I’ve not heard of before, probably because I’ve not really had a need for it, but now that I know what it does, there are so many things it would save time with!

The example below is an excerpt from the Web Designer Wall:

.clip {
 position: relative;
 height: 130px;
 width: 200px;
 border: solid 1px #ccc;
}
.clip img {
 position: absolute;
 clip: rect(30px 165px 100px 30px);
}

How it works is you have a surrounding element, such as a div or li which sets the overall width and a border which gives the appearance of masking the image. It also sets the position of relative so that on the img tag, we can absolutely position it within the outer element.

The img tag is then set to position: absolute; with a clip property that clips the image to a rectangle shape (so it can also be a square).

The uses of this property are potentially huge, especially for image galleries, and you can also resize images by specifying the width and height on the img tag. Perfect for a gallery, as long as the images you are scaling aren’t huge, you don’t want images that appear small ot take a long time to load after all!

The big downside of this is that according to the SitePoint CSS reference, Internet Explorer up to and including version 7 do not fully support it, so you may need to use a variation on the syntax especially for Internet Explorer. The way I understand it,  you just need to use spaces instead of commas in the rect() syntax for Internet Explorer, but I haven’t had a chance to test this yet to be sure.

Even if it doesn’t work fully in Internet Explorer, you could easily implement it in a way that will gracefully degrade in IE.

I’m looking forward to using this property, have you used it on one of your sites? I’d love to see how you’re using it, let me know in the comments!