Fixing Internet Explorers Staircase Effect

Date Published: 09/03/2009 14:06

A major concern when building web pages using cascading style sheets is making sure that it works across multiple browsers. Anyone who has spent any amount of time trying to style a site to look the same in all browsers will know that this is not easy when dealing with Microsoft Internet Explorer. It difficult to list all the bugs across the varying versions of IE since they tend to occur is differing or obscure circumstances. I have written this article about my experience with the staircase effect where IE drops elements down slightly as they are floated making them appear like a staircase as opposed to a straight line.

Causes of the Staircase Effect

There are many different causes of the staircase effect. The first one I encountered was a line break issues. I had a containing DIV holding some links which would act as a menu which would be displayed horizontally. To make sure that people who did not have stylesheets turned on I put line breaks between each link so that they would all have their own line in the raw HTML version. In firefox simply floating all contents of the holding div put all the links onto one line as intended but internet explorer rendered them like a staircase.

div#links a {
   float: left;
   height: 30px;
}

<div id="links">
<a href="#" name="one">Link One</a><br />
<a href="#" name="two">Link Two</a><br />
<a href="#" name="three">Link Three</a><br />
<a href="#" name="four">Link Four</a><br />
</div>

To solve this issue there are 2 options. The problematic style attribute as far as the links are concerned is setting the height. Removing this will solve the problem but sometimes this is not an option. The best method is to simply set the line break to display none as this will stop IE from rendering the line break which cannot be floated left, which is the cause in this instance.

div#links br {
   display: none;
}

This is just one occurrence of the staircase effect. I have seen others where when floating list items within a list can cause the items to drop down in a similar manner. To solve this give the list items a width and this should bring them back into line.

This is just one problem encountered when developing web sites for Internet Explorer. There will be many other connotations of this same bug which may be similar to this one but not exactly the same. Solving these little puzzles it provides has been referred to as a fun challenge, whereas for others (me included) it is a frustrating battle. Having to hack your site for the sake of one poorly programmed browser is slightly illogical but with IE having such a massive user base, we don't have a choice. If you discover your site is suffering from the staircase effect and you are struggling to resolve it feel free to post below and I will try my best to help you fix it.

Comments

Sorry comments are currently disabled for maintenence

5 Most Recent Articles

Manually Triggering Events in ASP.NET from JavaScript

A quick guide for ASP.NET developers on how to manually trigger ASP.NET events from JavaScript.

Advanced Use of MySQL Stored Procedures

An article for users of MySQL databases describing how they can use advanced stored procedures to improve efficiently in their applications.

Using MySQL Stored Procedures and Extending MySQLi in PHP

A guide for LAMP developers to using stored procedures in MySQL and extending the MySQLi class.

Reading and Writing to Excel Spreadsheets in Python

An introduction to using the xlwt and xlrd modules for python to interact with Microsoft Excel spreadsheets.

Interact with the Web Using Python and the HTTP Library

This is an introduction to making HTTP requests from a python script/application using httplib.

Sponsors