42

Solutions

Web Apps. Mobile Apps. Awesome!

Blog

The Joys of IE Browser Testing

February 9, 2012
by

Dan Kellner is a 42 Solutions Senior User Interface and Experience designer and developer. He frequently finds himself frustrated by the limitations imposed by the older browsers on the possibilities of new design techniques. This is one such example.

First of all let me start by saying that browser testing for IE is one part of my job that I hate the most. THE. MOST. I wish IE7 and, to a lesser extent, IE8 would die quick deaths, but, no. That would be too easy, as I’m sure you remember how long it took for IE6 to go the way of the dodo.

Fortunately, most IE8 issues can be solved with the simple meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

 

But IE7 has it’s own problems, especially when dealing with absolutely positioned elements. Take the following piece of CSS that positions the diagonally slanted stripes on the top of the 42 Solutions website:

1
2
3
4
5
6
7
8
9
10
.topDiagonal {
background-color:#bf7300;
background-image: url("../images/TopStripeDiagonal.jpg");
background-position: right bottom;
background-repeat: no-repeat;
height: 353px;
width: 50px;
margin-left:1020px;
position:absolute;
}
.topDiagonal {
background-color:#bf7300;
background-image: url("../images/TopStripeDiagonal.jpg");
background-position: right bottom;
background-repeat: no-repeat;
height: 353px;
width: 50px;
margin-left:1020px;
position:absolute;
}

This CSS places the stripes perfectly in FireFox, Chrome, Safari, IE8, and IE9. Essentially all the real browsers. But in IE7 the margin-left attribute creates a block that pushed down all the surrounding elements like so:

Messed up, right?

Given that we’d just launched the new site, I figured we had two options:

1. We could throw in some javascript and a splash window to display a message for IE7 users along the lines of, “*sigh* Really? Won’t you please upgrade you obsolete and increasing ancient browser?” But unfortunately many of our corporate clients still use it and it would’ve undercut the fact that 42 Solutions offers browser QA testing as part of our services. So,

2. I guess I just had to bite the bullet and fix it.

There are a few tricks to fixing the IE7 float problem, but my favorite is to use a conditional stylesheet in combination with simple CSS changes for IE7. By viewing the source of the 42 site, in the <head> section, you’ll see:

<link href="http://www.fortytwosolutions.com/wp-content/themes/fortytwo/css/42main.css" rel="stylesheet"
type="text/css" />

<!--[if IE 7]>
<link href="http://www.fortytwosolutions.com/wp-content/themes/fortytwo/css/42main7.css" rel="stylesheet"
type="text/css" />
<![endif]-->

 

The first line is a link to the 42main.css stylesheet that contains all the CSS rules for FireFox, Chrome, Safari, IE7, IE8 and IE9. After that follows an if statement that tells the site if the browser being used is IE7 to then use 42main7.css. Since the styles cascade down (The ‘C’ in CSS), I only have to include the modified rules that only applies to IE7 in the alternate stylesheet.

The rule .topDiagonal in the IE7 stylesheet is defined as

1
2
3
4
5
6
7
8
9
10
11
.topDiagonal {
background-color:#bf7300;
background-image: url("../images/TopStripeDiagonal.jpg");
background-position: right bottom;
background-repeat: no-repeat;
height: 353px;
width: 50px;
margin-left:1020px;
position:relative;
margin-top:-346px;
}
.topDiagonal {
background-color:#bf7300;
background-image: url("../images/TopStripeDiagonal.jpg");
background-position: right bottom;
background-repeat: no-repeat;
height: 353px;
width: 50px;
margin-left:1020px;
position:relative;
margin-top:-346px;
}

 

The main difference here is that I used relative positioning instead of absolute. Using relative positioning and then figuring out the difference with a negative top margin has always been one of the easiest fixes for correcting the IE7 absolute positioning bug. And, since the IE7 stylesheet contains only the modified rules, I don’t have to maintain two full stylesheets. I can design and code for the majority of the browsers out there and then just modify the specific rule causing the problems in the alternate stylesheet.

Cross-browser compatibility is going to be an issue until the older non-compliant die but, until then, I guess we’ll just keep hacking the bugs.

Back to Blog

42 Tags: ,

Comments

Content for class "bottomYellow" Goes Here
Content for class "bottomBlue" Goes Here

42 Solutions

Working with 42 Solutions, you’ll find that it’s not the technology that’s important, it’s the idea. Regardless of whether your company is based on proprietary software or open source, we will find the right tools to get the job done.

Invite us to your office and we’ll send a pair of consultants armed with laptops and bright ideas, ready to solve your problem and offer solutions. We pride ourselves in getting to know how you do business and integrating into your process.