Common IE bugs and Fixes – Width Bug & Flickering Backgrounds

Well, another day, another post. Welcome back fellow wanderers in tech. I hope you’ve kept well, and are raring to jump into your weekend (for those of you who are in the Middle East, I hope you had a good weekend).

So, today we’ll run back into the weird and wacky world of Internet Explorer, more specifically, IE bugs and fixes for common issues faced by developers. So hang on to your shorts, plug in your keyboard and get fixing those nasty little bugs.

Right, so one of the most common errors or bugs in IE6 is the placement of text according to CSS box models. This happens because while most browsers will follow Web 3.0 protocols, and calculate width thus:

• total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Our wonderful friends working over at the IE labs decided to go with the following to determine width:

• total width = margin-left + width + margin-right

Now, as you can see, there’s a fair bit of discrepancy in the way both are calculated and that obviously affects the outcomes. So how can you overcome? Simple!

• Right now, immediately, just swap to using Web 3.0 compliant upgrades of Internet Explorer. This will save you time and a lot of heartache.

The lasting solution though, and one that I would go with would be to use a CSS hack which all current browsers can understand:

#content {

padding:10px;

border:1px solid;

width:200px;

w\\idth:180px;

}

Another issue that I have faced is fixing backgrounds. I mean, you make a nice website and everything, but for some reason in IE the background images flicker and shake like they have the flu. But don’t stress just yet, we have a fixit for you too.

The reason that this happens though (just so you know what you’re fixing and why) is that IE finds it hard to cache the background image effectively, which leads to IE reloading it every time, causing the flickers.

As maddening as the issue is, trust me when I say the solution is as simple. All you need to do is use one line, that’s right, one line of JavaScript to make IE properly cache the images and backgrounds eliminating the issue.

The JavaScript sentence you need is:

document.execCommand(“BackgroundImageCache”,false,true);

So there you have it. two of the most frustrating bugs on IE, and they’re fixed, just like that. Or rather just like this. But you get the point. So fix those bugs and get your website functioning just how you thought it would. Till the next post.

email

print