Page Clipping IE6 and Expansion in FF

[sakie]

Hi All

I'm having a couple of very freaky CSS problems on my site


For the first one please review the following link in IE6

http://cph-demo.mondo.dk/CPH/DK/MAIN...+og+transport/

Please note that for a moment the entire page gets rendered and then suddenly get clipped from the bottom right at the bottom border of the browser(even the scroll bar appears then disappears) and this gets even worse if you roll over any link on the left of the page the page gets expanded to normal.

For part two please review the following link in Fire Fox

http://cph-demo.mondo.dk/CPH/DK/MAIN...+og+transport/
The problem here is pretty evident the content of the page expands but the main container containing the whole of the content doesn't. Whenever I try to fix this problem it does get fixed but then starts having same problem in IE7. I've tried my level best to solve these issues without any luck / success and I've to make the site work perfectly on IE6 IE7 and FF.

Any prompt help in this regard will be highly appreciated.

[rdoyle720]

Both of your problems seem to have to do with your pageContainer div and floats. Your IE problem is called the "guillotine bug". Luckily a lot of IE 6 problems can be fixed. Basically you want to force a property called "hasLayout". The best way to do this is to set a proprietary zoom property.

The Firefox issue is because your article is the tallest thing in the pageContainer, and is floating. When you float something within something else, the container doesn't expand with it unless it is floating, or its overflow is set to auto.

So, you might be able to fix both your problems by adding this to your pageContainer css:

#pageContainer {
     zoom: 100%;
     overflow: auto;
}

[sakie]

Hi rdoyle720
First thanks a lot for sharing the fix.. Unfortunately in my case it worked only partially :-(

In IE6 the page is not getting clipped now but the placement of the div containing the text has gone all wrong please review the following link in IE6
http://cph-demo.mondo.dk/CPH/DK/MAIN...+og+transport/

There is another relatively small issue I need to have the content div expanded to the whole length of the page on all three browsers but the problem with this is that once I get it going for IEs it doesn't work for FF and vice versa.

I really am counting on you now for another voodoo fix after trying every single technique I knew.

Many Thanks in advance

[sakie]

For the reference here is the CSS of the problem infected area

html, body {
margin: 0; padding: 0;
background: #ccc;
text-align: center;
height: 100%;
}

#pageContainer
{
width: 770px;
margin: 0 auto;
text-align: left;
background: #F3F2ED;
min-height: 100%;
/*display:table;
height:100%;*//*These two lines fix the problem of page height in FF but the ones in IEs start having vertical and horizontal scrolls*/
zoom:100%;
overflow:auto;
}
#article
{
width: 438px;
overflow:visible;
border:1px solid #d5d5d5;/*Line added by Saqib #F3F2ED */
}

[sakie]

Hi

I'm still looking for help

[rdoyle720]

Well the link above looks the same to me in IE 6 and Firefox 3...maybe you've fixed it since you posted?

As far as the height issue, I'm not sure exactly what's going wrong, but I can tell you that IE 6 doesn't support min-height. In IE 6, height acts like min-height, so you can use a CSS hack to give IE 6 it's own rule.

* html #pageContainer { height: 100%} /* applies only to IE 6 */

[sakie]

issue has been resolved there was a problem with a code file that was not being updated properly many thanks to all who helped