Left column in 3-column design flips to middle column at window resize in IE8

[abetmindennew]

I use a three-column design with fixed left and right column and variable middle column. When window is resized, the contents of the left column are shown on top of the middle column, the left column is empty. Solved by refresh. Problem does not occur in Firefox 4.01.

@charset "iso-8859-1";
.clear
{
	clear: both;
	padding-bottom: 1px;
	margin-bottom: -1px;
}
.hide
{
	display: none !important;
}
.inside
{
	padding: 0 1em;
}
ul, ol, dl, p, h1, h2, h3, h4, h5, h6
{
	margin-top: 14px;
	margin-bottom: 14px;
	padding-top: 0;
	padding-bottom: 0;
}
h1
{
	font-size: 220%;
}
h2
{
	font-size: 190%;
}
h3
{ color: navy; font-size: 160%; }
h4
{ color: navy; font-size: 130%; }
h5
{ color: navy; font-size: 100%; }
h6
{
	font-size: 80%;
}
a, a:link, a:visited, a:active
{
	text-decoration: underline;
}
a:hover
{
	text-decoration: none;
}
code
{
	font-family: "Courier New", Courier, monospace;
}
label
{
	cursor: pointer;
}
td, th
{
	vertical-align: top;
}
table
{
	font-size: 100%;
}
body
{ margin: 0;	
	font-size: 100.1%; border-width: 0;	
}
#pageWrapper
{ min-width: 40em;	
	width: auto; border: solid 1px #fff; }
* html #pageWrapper
{
		word-wrap: break-word;
}
#masthead
{ border-width: 0 0; padding: 0; border-color: #fff; border-style: solid; }
#masthead h1
{
	padding: 0;
	margin: 0;
}
#outerColumnContainer
{
	border-left: 14em solid #fff;
	border-right: 14em solid #fff;
}
#innerColumnContainer
{ border-width: 0 1px; margin: 0 -1px;
	width: 100%; z-index: 1; border-color: #fff; border-style: solid; }
#leftColumn, #middleColumn, #rightColumn, * html #SOWrap
{
	overflow: visible;
	position: relative;
}
#SOWrap
{
	float: left;
	margin: 0 -1px 0 0;
	width: 100%;
	z-index: 3;
}
#middleColumn
{ float: right; margin: 0 0 0 -1px; width: 100%; z-index: 5; }
#leftColumn
{
	float: left;
	margin: 0 1px 0 -14em;
	width: 14em;
	z-index: 4;
}
#rightColumn
{
	float: right;
	width: 14em;
	margin: 0 -14em 0 1px;
	z-index: 2;
}
#footer
{ border-width: 1px 0 0; padding: 0.5em 0.5em 0 ; border-color: #fff; border-style: solid;0.5em 0;
}

p.fontsize-set
{ font-size-adjust: 80%; text-align: center; }
p.fontsize-set img
{
	border-width: 0;
}
#menuh
	{ font-family: arial, helvetica, sans-serif; width: auto; float: left; }
		
#menuh a
	{ text-align: center; width: auto; display:block; white-space:nowrap; margin:0; padding: 0.3em 0.3em 0.3em 0.1em; border-color: rgb(92,150,181); border-style: solid; border-width: 0 1px 0 0; }
	
#menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest */
	{ color: navy; background-color: aqua; text-decoration:none; width: auto; }
	
#menuh a:hover	/* menu at mouse-over  */
	{
	color: white;
	background-color: rgb(98,129,176);
	text-decoration:none;
	}	
	
#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{ background-image: url(../images/navdown_black.gif); background-position: right center; background-repeat: no-repeat; width: auto; }
	
#menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
	{ background-image: url(../images/nav_black.gif); background-position: right center; background-repeat: no-repeat; }

#menuh ul
	{ list-style:none; margin:0; padding:0; float:left; width:9em; border-right-width: 1px; border-left-width: 1px; outline-width: thin;	/* width of all menu boxes */
	}

#menuh li
	{ position:relative; min-height: 1px; vertical-align: bottom; }

#menuh ul ul
	{ position: absolute; z-index:500; top:auto; display:none; padding: 1em; margin:-1em 0 0 -1em; }

#menuh ul ul ul
	{ top:0; left: 100%; }

div#menuh li:hover
	{
	cursor:pointer;
	z-index:100;
	}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
.s1 { float: left; margin-right: 12px; margin-bottom: 8px; margin-top: 8px; }
.s2 { }
.s3 { float: right; margin-left: 12px; margin-bottom: 8px; margin-top: 8px; }
.vnav
{ margin: 0; }
.vnav ul, .vnav ul li
{ background-color: aqua; margin: 0; padding: 0; list-style-type: none; display: block; }
.vnav ul
{ background-color: aqua; border: solid 0 #fff; }
.vnav ul li
{ background-color: aqua; border-bottom: 0 solid #fff; }
.vnav ul li, .vnav ul li a
{
	margin: 0;
	display: block;
	padding: 0;
	line-height: normal;
}
.vnav ul li a
{ background-color: aqua; display: block; padding: 2px 5px 3px; }
.vnav ul li a, .vnav ul li a:link, .vnav ul li a:visited, .vnav ul li a:active, .vnav ul li a:hover
{
	text-decoration: none;
	border: solid 1px white;
	cursor: pointer;
}
.vnav h3
{
	margin-bottom: 0;
	padding-bottom: 0;
	font-size: 126%;
}
* html .vnav ul li a
{ background-color: aqua; height: 0.01%; }
* html .vnav ul
{ background-color: aqua; position: relative;	/* IE needs this to fix a rendering problem */
}
#pageWrapper, #masthead, #innerColumnContainer, #footer, .vnav ul, .vnav ul li, .hnav, .hnav ul li a
{
	border-color: rgb(92,150,181);
}
html, body
{
	background-color: white;
	color: black;
	font-family: arial, helvetica, sans-serif;
}
#pageWrapper
{
	font-size: 80%;	
}
#masthead
{
	background-color: white;
	color: #fff;
}
#outerColumnContainer
{
	border-left-color: white;
	border-right-color: white;
	background-color: #fff;
}
.vnav ul li a:link, .vnav ul li a:visited, .vnav ul li a:active
{
	text-decoration: none;
	background-color: rgb(218,235,249);
	color: navy;
}
#rightColumn .vnav ul li a:link, #rightColumn .vnav ul li a:visited, #rightColumn .vnav ul li a:active
{ font-size: small; background-color: aqua; text-align: center; }
.vnav ul li a:hover, #rightColumn .vnav ul li a:hover
{
	text-decoration: none;
	background-color: rgb(98,129,176);
	color: #fff;
}
#rightColumn .inside
{
	font-size: 100%;
}
#rightColumn .inside .vnav
{
	font-size: 110%;
}
#footer
{
	background-color: white;
	color: rgb(92,150,181);
	text-align: center;
}

Have searched posts on this site to no avail. Anyone has a clue?

[PaulOB]

Hi, Welcome to Sitepoint

It looks as though you are using the negative margin thick border technique which is prone to jumping around unless you are very careful and make sure that there is no overlap dues to rounding issues and the like.

I’d need to see the html that goes with that structure also to build a working demo of the problem as the css alone doesn’t tell me how you have the html structured.

I’m guessing it’s either a rounding error and perhaps a negative margin or overflow hidden could cure it but I’d need to test.

Better still do you have a link to the page?

[PaulOB]

Ok, I’m having a guess that you are using a structure like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@charset "iso-8859-1";
.clear {
    clear: both;
    padding-bottom: 1px;
    margin-bottom: -1px;
}
.hide {
    display: none !important;
}
.inside {
    padding: 0 1em;
}
ul, ol, dl, p, h1, h2, h3, h4, h5, h6 {
    margin-top: 14px;
    margin-bottom: 14px;
    padding-top: 0;
    padding-bottom: 0;
}
h1 {
    font-size: 220%;
}
h2 {
    font-size: 190%;
}
h3 {
    color: navy;
    font-size: 160%;
}
h4 {
    color: navy;
    font-size: 130%;
}
h5 {
    color: navy;
    font-size: 100%;
}
h6 {
    font-size: 80%;
}
a, a:link, a:visited, a:active {
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
code {
    font-family: "Courier New", Courier, monospace;
}
label {
    cursor: pointer;
}
td, th {
    vertical-align: top;
}
table {
    font-size: 100%;
}
body {
    margin: 0;
    font-size: 100.1%;
    border-width: 0;
}
#pageWrapper {
    min-width: 40em;
    width: auto;
    border: solid 1px #fff;
}
* html #pageWrapper {
    word-wrap: break-word;
}
#masthead {
    border-width: 0 0;
    padding: 0;
    border-color: #fff;
    border-style: solid;
}
#masthead h1 {
    padding: 0;
    margin: 0;
}
#outerColumnContainer {
    border-left: 14em solid #fffccc;
    border-right: 14em solid #fffccc;
    background:green
}
#innerColumnContainer {
    border-width: 0 1px;
    margin: 0 -1px;
    width: 100%;
    z-index: 1;
    border-color: #fff;
    border-style: solid;
}
#leftColumn, #middleColumn, #rightColumn, * html #SOWrap {
    overflow: visible;
    position: relative;
}
#SOWrap {
    float: left;
    margin: 0 -1px 0 0;
    width: 100%;
    z-index: 3;
}
#middleColumn {
    float: right;
    margin: 0 0 0 -1px;
    width: 100%;
    z-index: 5;
}
#leftColumn {
    float: left;
    margin: 0 0 0 -14em;
    width: 14em;
    z-index: 4;
}
#rightColumn {
    float: right;
    width: 14em;
    margin: 0 -14em 0 0;
    z-index: 2;
}
#footer {
    border-width: 1px 0 0;
    padding: 0.5em 0.5em 0;
    border-color: #fff;
    border-style: solid;
}
p.fontsize-set {
    font-size-adjust: 80%;
    text-align: center;
}
p.fontsize-set img {
    border-width: 0;
}
#menuh {
    font-family: arial, helvetica, sans-serif;
    width: auto;
    float: left;
}
#menuh a {
    text-align: center;
    width: auto;
    display:block;
    white-space:nowrap;
    margin:0;
    padding: 0.3em 0.3em 0.3em 0.1em;
    border-color: rgb(92,150,181);
    border-style: solid;
    border-width: 0 1px 0 0;
}
#menuh a:link, #menuh a:visited, #menuh a:active    /* menu at rest */ {
    color: navy;
    background-color: aqua;
    text-decoration:none;
    width: auto;
}
#menuh a:hover  /* menu at mouse-over  */ {
    color: white;
    background-color: rgb(98,129,176);
    text-decoration:none;
}
#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */ {
    background-image: url(../images/navdown_black.gif);
    background-position: right center;
    background-repeat: no-repeat;
    width: auto;
}
#menuh a.parent, #menuh a.parent:hover  /* attaches side-arrow to all parents */ {
    background-image: url(../images/nav_black.gif);
    background-position: right center;
    background-repeat: no-repeat;
}
#menuh ul {
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    width:9em;
    border-right-width: 1px;
    border-left-width: 1px;
    outline-width: thin;    /* width of all menu boxes */
}
#menuh li {
    position:relative;
    min-height: 1px;
    vertical-align: bottom;
}
#menuh ul ul {
    position: absolute;
    z-index:500;
    top:auto;
    display:none;
    padding: 1em;
    margin:-1em 0 0 -1em;
}
#menuh ul ul ul {
    top:0;
    left: 100%;
}
div#menuh li:hover {
    cursor:pointer;
    z-index:100;
}
div#menuh li:hover ul ul, div#menuh li li:hover ul ul, div#menuh li li li:hover ul ul, div#menuh li li li li:hover ul ul {
    display:none;
}
div#menuh li:hover ul, div#menuh li li:hover ul, div#menuh li li li:hover ul, div#menuh li li li li:hover ul {
    display:block;
}
.s1 {
    float: left;
    margin-right: 12px;
    margin-bottom: 8px;
    margin-top: 8px;
}
.s2 {
}
.s3 {
    float: right;
    margin-left: 12px;
    margin-bottom: 8px;
    margin-top: 8px;
}
.vnav {
    margin: 0;
}
.vnav ul, .vnav ul li {
    background-color: aqua;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
}
.vnav ul {
    background-color: aqua;
    border: solid 0 #fff;
}
.vnav ul li {
    background-color: aqua;
    border-bottom: 0 solid #fff;
}
.vnav ul li, .vnav ul li a {
    margin: 0;
    display: block;
    padding: 0;
    line-height: normal;
}
.vnav ul li a {
    background-color: aqua;
    display: block;
    padding: 2px 5px 3px;
}
.vnav ul li a, .vnav ul li a:link, .vnav ul li a:visited, .vnav ul li a:active, .vnav ul li a:hover {
    text-decoration: none;
    border: solid 1px white;
    cursor: pointer;
}
.vnav h3 {
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 126%;
}
* html .vnav ul li a {
    background-color: aqua;
    height: 0.01%;
}
* html .vnav ul {
    background-color: aqua;
    position: relative;   /* IE needs this to fix a rendering problem */
}
#pageWrapper, #masthead, #innerColumnContainer, #footer, .vnav ul, .vnav ul li, .hnav, .hnav ul li a {
    border-color: rgb(92,150,181);
}
html, body {
    background-color: white;
    color: black;
    font-family: arial, helvetica, sans-serif;
}
#pageWrapper {
    font-size: 80%;
}
#masthead {
    background-color: white;
    color: #fff;
}
/*#outerColumnContainer {
    border-left-color: white;
    border-right-color: white;
    background-color: #fff;
}*/
.vnav ul li a:link, .vnav ul li a:visited, .vnav ul li a:active {
    text-decoration: none;
    background-color: rgb(218,235,249);
    color: navy;
}
#rightColumn .vnav ul li a:link, #rightColumn .vnav ul li a:visited, #rightColumn .vnav ul li a:active {
    font-size: small;
    background-color: aqua;
    text-align: center;
}
.vnav ul li a:hover, #rightColumn .vnav ul li a:hover {
    text-decoration: none;
    background-color: rgb(98,129,176);
    color: #fff;
}
#rightColumn .inside {
    font-size: 100%;
}
#rightColumn .inside .vnav {
    font-size: 110%;
}
#footer {
    background-color: white;
    color: rgb(92,150,181);
    text-align: center;
}
#innerColumnContainer:after {
    content:" ";
    display:block;
    clear:both;
    height:0;
    overflow:hidden;
}
#innerColumnContainer {
    zoom:1.0
}
</style>
</head>
<body>
<div id="pageWrapper">
    <div id="outerColumnContainer">
        <div id="innerColumnContainer" class="clearfx">
            <div id="SOWrap">
                <div id="leftColumn">
                    <p>left column</p>
                    <p>left column</p>
                    <p>left column</p>
                    <p>left column</p>
                    <p>left column</p>
                    <p>left column</p>
                </div>
                <div id="rightColumn">
                    <p>right column</p>
                    <p>right column</p>
                    <p>right column</p>
                    <p>right column</p>
                    <p>right column</p>
                    <p>right column</p>
                </div>
                <div id="middleColumn">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

The above wouldn’t work for me in any browsers until I removed the 1px margin from both these rules as follows.

#leftColumn {
    float: left;
   [B] margin: 0 0 0 -14em;[/B]
    width: 14em;
    z-index: 4;
}
#rightColumn {
    float: right;
    width: 14em;
  [B]  margin: 0 -14em 0 0;[/B]
    z-index: 2;
}

There shouldn’t be a need for a 1px margin on those elements as the negative drag takes the element into the available 14em border space.

Using the code above I get no drop in IE8 so I will probably need to see your working example to debug further.

[abetmindennew]

Following your first suggestion, I took the CSS and a sample page to my own public site (hosted somehere formal), and the problem did not occur - check Ministry of Education i-site.
The server I’m working with is an IIS 7 Intranet server. Same page served from it does give the error. I’ll check out your suggestions thoroughly and will let you know what comes out. Many thanks for now.

[PaulOB]

Check that the page isn’t being served in quirks mode on your server or if anything has been added above the doctype etc.

[abetmindennew]

No, the removal of the 1px margin didn’t change the flipping of the left column, but it did improve things to the extent that the page now exactly fits the max window on our screens. Apparently the 1px margin confused the browser into thinking that there was more to display, so it showed the sliding bar at the bottom even when the window was full-sized. That’s now gone, but the flipping-on-resize still happens…
The offending page sits on the link I gave earlier, although there it behaves fine despite me using the very same browser, the same CSS and the same HTML!

[PaulOB]

@abetmindennew

No, the removal of the 1px margin didn’t change the flipping of the left column, but it did improve things to the extent that the page now exactly fits the max window on our screens. Apparently the 1px margin confused the browser into thinking that there was more to display, so it showed the sliding bar at the bottom even when the window was full-sized. That’s now gone, but the flipping-on-resize still happens…
The offending page sits on the link I gave earlier, although there it behaves fine despite me using the very same browser, the same CSS and the same HTML!

All I can think is that your server is adding something to the page so do a view source and see if the doctype is intact and there is nothing above the doctype.

Sometimes there are latency issues on some servers which cause bugs not seen elsewhere and these are very hard to fix I’m afraid as they can usually only be fixed on site where the problem occurs.

Make sure all images have their height and width attributes in place because that can cause a redraw if they are missing and upset the display.

[PaulOB]

Also don’t use import for the css but use the link tag as it loads quicker and could possibly avoid problems.

[PaulOB]

Another important thing is to try and use valid code as IE freaks out when something isn;t right.

Here for example you have wrapped divs inside a p element which is invalid. The p element can only contain inline elements and not block elements.

[B]<p>[/B]
                    <h5>
                        <div align="center">Contact</div>
                    </h5>
                    <a href="mailto:isite.MoE@gmail.com">
                    <div align="center">isite.MoE@gmail.com</div>
                    </a><BR>
                    <h6>
                        <div align="center">for contributions or comments<BR>
                            (or visit the ICT Team in Room 12 in the new building).</div>
                    </h6>
                    <div class="vnav">
                        <ul>
                            <li><a href="ictsup.shtml">
                                <div align="center">Click here<BR>
                                    for ICT Support</div>
                                </a></li>
                        </ul>
                    </div>
                    <div class="vnav">
                        <h5>
                            <div align="center">Other useful links:</div>
                        </h5>
                        <ul>
                            <li><a href="http://www.et.undp.org/">UNDP Ethiopia</a></li>
                            <li><a href="http://www.dagethiopia.org/">DAG Ethiopia</a></li>
                        </ul>
                    </div>
                   [B] </p>
                    <BR>
                    <BR>
[/B]

Also avoid using breaks to make space as that is not what they are meant for. use margins on existing elements to make space and put text in the proper semantic container such as a p element. Some browsers ignore double breaks anyway so you will not get extra space.

None of this will probably have any impact on the problem but until you get the page to a valid state then you can’t discount it as a cause.

The following also causes display problems in IE.

<h5>
<div align="center">Contact</div>
</h5>
 [B]<a href="mailto:isite.MoE@gmail.com">[/B]
 <div align="center">isite.MoE@gmail.com</div>
</a><BR>

You’ve placed an anchor shoulder to shoulder with a div element and the browser then has to create an anonymous block box to hold that structure as inline elements should be in a block box.

Neither as mentioned above can you have a div inside a heading tag. The code should be like this.

<h5>Contact</h5>
<p><a href="mailto:isite.MoE@gmail.com"></a></p>

When you make an invalid structure then the browser has to error handle and then anything can happen so you must rule these errors out first. As I said they not be the cause but you should eliminate them first anyway.

[abetmindennew]

I don’t know how I “contracted” that one, but as soon as I uninstalled Conduit Engine, all problems went…

Thanks for the tips, I did clean up the code considerably (though it didn’t help, it is certainly neater…)