Jump to content

IE6 stepping problems - Yes again!


scorpion

Recommended Posts

I have been happy with how my website displays in FF and IE7 and all pages validate to HTML 4.01 Strict.

ww w.irish type3 dna.o rg/ (remove spaces)

 

My PC at work is running IE6 and to my utter dismay, the center column display is stepped on most pages.

I have read the killersite archives and tried the various IE6 solutions, adding width and line-height to the IDs.

 

Now in IE6, the first heading always displays at the top of the center column as it should and a page with a List immediately after the heading is also displayed correctly. It appears to only step if a para that is long enough to wrap is present.

 

But surprise, surprise, on pages where content1 or content2 ID, (both of which have a height specified), are used in place of content ID, the display is correct in FF, IE7 and the problem IE6.

 

The website has a container ID and inside are three IDs, the first floated Left, with the second floated Right, and content taking up the balance. This ID's width adjusts automatically depending on the monitor resolution.

 

#container {

width:100%;

line-height:0px;

}

 

 

#left {

float:left;

background-color:#506F89;

width:150px;

margin-right:10px;

margin-top:10px;

padding:1em 0em 0em 0em;

line-height:100%;

}

 

#right {

float:right;

color:#E0E0E0;

background-color:#506F89;

width:130px;

line-height:100%;

margin-top:10px;

margin-left:10px;

padding:1em;

}

 

#inner {

color:#000000;

background-color:#9EB1C0;

width:120px;

line-height:120%;

margin:3px auto;

padding:0.5em;

}

 

#content {

color:#333333;

margin:20px 190px 0 190px;

padding:1em;

border-left:1px solid #999;

border-right:1px solid #999;

line-height:120%;

}

 

#content1 {

color:#333333;

margin:0 190px 0 190px;

padding:1em;

border-left:1px solid #999;

line-height:110%;

height:570px;

}

 

 

#content2 {

color:#333333;

margin:20px 190px 0 190px;

padding:1em;

border-left:1px solid #999;

border-right:1px solid #999;

line-height:120%;

height:500px;

}

 

The content ID does not have a width as it expands depending on the monitor resolution. I have tried width:100%; but that mucks up the display in FF and IE7. The content ID expands under the right column.

 

I only work 2 days a week so I can't check my latest mod until Tuesday. I have added to the home page :-

 

 

 

I could use this solution generally, but it has been suggested to avoid scrolling where possible.

Any other thoughts?

Edited by scorpion
Link to comment
Share on other sites

The principles of your CSS are correct, code a left div with float:left and a width, code a right div with float: right and a width, then code the center div with no float and no width but with side margins equal or more than the side divs and it should be flexible and move up into the middle space.

 

Unfortunately my IE6 has a screen resolution of 800*600px and you have a table inside width="500" and images 690px wide and they don't fit. The reason is that IE7 and Firefox make the content div narrower and let the wider elements expand out of the box but IE6 expands the content div to the width required which is too much.

 

You will have to set widths for all divs for IE6 and float the #content div next to #left without a margin-left.

 

You have also used widths and margins in px and side padding in ems which isn't a problem here because your side margins on #content are large enough, but it does make it difficult to be pixel-perfect.

Edited by Wickham
Link to comment
Share on other sites

Changed em to px as suggested for consistency.

 

Obviously I haven't thought about the table and image widths too carefully. I had been working on a min resolution of 1152 x 864 but I like to use all the real estate if possible. My home monitor is 1440 x 900. I have reduced the margins of the center div. The right-margin of the Left div and left-margin on the Right div are superfluous due to the set margins in the center div so have been removed from the css.

 

For the moment, margins now 160px, border 1px, padding 6px =167px x 2 = 334px. In a 1024 resolution, we have 690px left for the center div which would hold the 690px image. So it should be OK at a minimum 1024 x 768, but not 800 x 600 of course. Tables and images would need to be brought back to 466px to render in 800 x 600. (334px + 466px = 800px).

 

The monitor running IE6 at work is at least 1440 x 900 so the tables and images are not an issue. What interests me is that adding a Height to the center div seemed to make IE6 display correctly. Have others found the same?

Link to comment
Share on other sites

You could leave it all as it was or as you have it now and then use a conditional comment just for IE6 with fixed larger width for the content div and float it next to the left div on the assumption that only IE6 users will use a small screen resolution.

 

That would mean also altering the order in the html body from left, right, content to left, content, right and you could do that by giving the new content div a new id say content2 and repeating it just after the left div in the markup.

 

In IE6 conditional comment you give #content display: none and #content2 display: block and in the main stylesheet you do the reverse, so only #content or #content2 shows. However, that doesn't allow for viewers reducing window size in a modern browser.

Edited by Wickham
Link to comment
Share on other sites

I see what you are saying and I like your approach.

 

I do like to let the center expand to fill what's left but it was the stepping problem with IE6 that I was having issues with, when I don't specify a width.

I have reverted to 190 margins over 160 as I preferred a bit more 'white space' that the larger margin gives. I guess I am saying that I am prepared to ignore the problems that those with low-res monitors will have with my img and table widths! Time they upgraded!

 

As I said before I found that adding a height to the center div (with no width specified) stopped the stepping so I will be at work tomorrorw and be able to check if the conditional that I have placed in the /index.php page works,

 

 

or if the conditional in the /Surnames.php page is better.

 

 

I have read somewhere that the height in IE6 is treated as minimum height. If so, that might be a better solution for the IE6 stepping problem.

 

Will advise after I see the effects tomorrow on my work IE6.

 

Also, Wickham, I pinched the search code from your site ... I hope that was OK! It looks good and works well.

 

Cheers ...

Link to comment
Share on other sites

Well setting the height with the 2nd conditional statement worked in stopping the display in IE6 from stepping:-

 

 

While using the #content {height:588px; overflow:scroll;} did not.

 

I appears that the report I read somewhere was correct in that IE6 reads a height as a min-height and allows the div to expand to the height required. (Very handy that!)

 

From what I have read (please correct me) these conditional statements cannot be inserted in the css file but must be added in the html just under the stylesheet statement. So I have added the following to ALL my webpages:-

 

 

Will report back after I check using IE6 on my work computer tomorrow if IE6 is playing ball!

 

Have reduced all images and tables to 500px width, down from 690px and 800px as some conciliation to those with low-res monitors.

Still needs 2(190 + 1 +6) + 500 = 894px so doesn't cater for 800 x 600.

Link to comment
Share on other sites

It looks OK in my IE6 at 1024*768 resolution but as you say, the middle column drops down in 800*600 as the tables and images are too wide at 500px.

 

Conditional statements should be put after a main stylesheet link in the head section, perhaps just before the tag.

 

It is possible to use conditional comments inside the body section, it's often done in dropdown menus which require a small table code in IE6 but not in other browsers, but it's not recommended.

 

You should note that the height in the IE6 conditional comment doesn't have to be 600px; I tried height: 1%; which also works (that's often used as a workaround for IE6 bugs).

Edited by Wickham
Link to comment
Share on other sites

Well I was able to see the results of my work today on my work computer running IE6 - beautiful! Stepping solved.

 

I used a height of 600px because on a couple of pages with little text, I wanted to keep the final footer line full width and not bounded by the left div.

 

I think it would be worthwhile if I summarize in a new topic ... maybe it could even be a sticky! to help others?

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...