INTERNET EXPLORER 8: COMBINING CSS, TABLES AND DIVS TO SOLVE ALIGNMENT ISSUES

The main difference between IE7 and IE8 seems to be that the alignment is all messed up in IE8. Although the alignment issue isn't ideal, IE8 has improved support for various web standards, especially cascading style sheets. Cascading style sheets is separate content from presentation. This will be our starting point. For this solution to work it is necessary for the presentation to be defined in external style sheets.

Step 1: Referencing the external Style sheet

In Example 1 an external style sheet is referenced and inside the tags a

tag is specified with an id=”DIV_Body”.

Example 1:

Head1" runat="server">
title>XYZ
link href="StyleSheet/StyleSheet_Main.css" rel="stylesheet" type="text/css" />
/head>
body style="margin: 0 0 0 0; width: 98%; text-align:center">
div style="text-align: center" id="DIV_Body">
/div>
/body>
/html>

Step 2: The Style sheet layout

My alignment solution is based on the relationship of the #DIV_Body class and table element as seen in Example 2.

Example 2:

#DIV_Body {
text-align:left;
margin-left:auto;
margin-right:auto;
vertical-align:baseline;
position:inherit;
width:98%;
}
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding-left:0px;
margin-left:auto;
margin-right:auto;
}

Step 3: Let the magic begin!

Insert the following on every page in your website/-application :

.
The rest of the solution relies on the user using tables for layout purposes inside the

tag.
Workarounds Available
• Emulate IE7 by inserting the following in the section of your page :
OR
• Click on the Compatibility View button supplied

Conclusion

It seems everyone's moving from a table-based website structure to a div-based website structure. However it's still necessary for the developer to know when to use what. Because a website is not the same as a web application I am sticking to my table-based structure roots when it comes to the application part. It's much faster to draw up a table with six rows and ten columns than it will ever be with divs. I use div tags for the structure of web pages and tables for the structure of page content.

For Web Applications:

The most important part of the table element style is the margin-left:auto and margin-right:auto. If the values aren't set to auto the layout won't work. These attributes will allow for the calculation of the margins of the tables position in relation to the main div tag. There are workarounds (as specified above) for existing sites but those are only temporary fixes.

For Web Sites:

IE8 now supports the display:table property

Example 3:

This is an example of a page with three columns, a header and a footer using div tags for the layout instead of tables:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html >
head>
title>Title
meta content="text/html; charset=utf-8" http-equiv="content-type" />
link href="Stylesheet_Main.css" rel="stylesheet" type="text/css" />
/head>
body>
div id="header">Header

div id="main">
div id="col_left">Left column