Jump to content

IE6 Stepping Problem - Solved!


scorpion

Recommended Posts

While a site may display correctly in FF or IE7/8, it can 'step' in IE6 where the content of a div displays below another rather than alongside.

 

Stepping can occur with a two or three column website where the width of one column is not specified so as to allow it to spread to the full width of the monitor irrespective of resolution.

 

From various tutorials, comments and trial and error I have found the following is needed:-

 

1. Have an overall container div where width is 100% and a line-height of 0px is specified. Within it are your two or three column divs.

2. Left div has a specified width, a specified line-height and floats left

3. Right div (if used) has a specified width, a specified line-height and floats right

4. The Center div has left and right margins sufficient to keep away from the side divs and a specified line height. Absence of a width allows the div to expand to take up all the space available at the resolution of the viewing monitor.

5. A height is not needed for any div to be displayed correctly in FF and IE7 as the divs expand vertically to contain the content. However in IE6 the absence of a height in the center div causes the stepping problem. The content is stepped below the side divs and displayed there. (Not good)

6. If a height is specified in the center div, then in FF and IE7, the excess content is cut off and not displayed. (Not good)

7. If a height is specified in the center div, then IE6 will display correctly alongside the side divs, (that is no stepping), and it sees the height as a minimum and will happily expand past the specified height to display all the content of the page.

8. So a conditional statement must be put in the header of each page with a height just for IE6.

 

These statements need to be incorporated in the css and html to avoid stepping:-

 

main.css

 

#container {

width:100%;

line-height:0px;

}

 

#left {

float:left;

width:150px;

line-height:100%;

}

 

#right {

float:right;

width:130px;

line-height:100%;

}

 

#content {

margin:20px 190px 0 190px;

line-height:120%;

}

 

The html should contain after the stylesheet statement and just before the :-

 

 

The height can be set an any suitable figure or even 1%

 

I trust this will help others with a 'stepping' problem.

 

Cheers ...

Edited by scorpion
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...