Help with CSS in IE6

[JustinWI]

I have started development on one of my sites and I am running into a problem with CSS in IE6. The page displays fine in my Firefox browser, but cuts off the last few lines in IE. I already fixed my one problem with IE not liking the position:fixed in CSS, but now it is cutting off the bottom.

Any suggestions?

 

[Dan]

Can you explain 'cutting off the bottom'?

 

[Jim_]

It would be a lot easier to find a solution if we could see the code in question.

 

[JustinWI]

By cutting of the bottom, I mean that it cuts off completely the last three lines of text/links and an image. I have fixed header ("header) and fixed right column (adcol). The text div that is being cut off is the contentsBox. It will scroll but not display all of the text in that section. It will load different CSS files depending on if it is IE or not. Here is the needed info from the IE CSS File :

body{  margin: 0;
padding: 0;  
		background-color:lightblue;
		height: 100%;
overflow: auto;
		}
html
{
overflow: hidden;
}
		
div.nav {
position: absolute;
top: 130px;
left: 15px;
}
body>div.nav {
position: fixed;
} 
		h2{ color:#FF0000;
		text-align:center;}
		h3 {text-align:center;}

#header{ position: absolute;
           top: 0px;
           left: 0px;
           width: 100%;
           height: 126px;
           z-index: 1;
          text-align:left;
		  background-image:url(header2.jpg);
		  background-repeat : no-repeat;
           }


#adCol{ position: absolute;
			left: 85%;
            top: 130px;
            width: 125px;
            
            padding: 3px;
			text-align: center;
			background-color:lightblue;
            }


#contentsBox{ position:relative;
              top: 130px;
			  height:800px;
              margin-left: 15px;
            margin-right:15%;
              padding: 0px 5px;
			  overflow: scroll;
			 
              }


dt { margin-top: 1em;
     color: #DD0000;}
	 .buttonscontainer {width: 75px;}

 

[Dan]

(What kind of crazy spacing is that?!)

I don't think there is a way to make sure something goes below something that is fixed or absolute positioned.

Can I see the page that has this? It would help a lot.

 

[JustinWI]

Yea, I threw together the CSS in about 15 mins so it probably needs some fine tuning. Here is the link to the site : www . onlinebusinessscam . com . It works fine in FireFox, but cuts off in IE6 and Safari.

Any help is appreciated.

 

[Dan]

Try changing

#contentsBox{ position: relative;
              top: 130px;
              margin-left: 15px;
            margin-right:15%;
              padding: 0px 5px;
              }

To

#contentsBox{ position: absolute;
              top: 130px;
              bottom: 0;
              margin-left: 15px;
            margin-right:15%;
              padding: 0px 5px;
              }

 

[JustinWI]

When changing it to position:absolute it fills the text through the right hand ad column and it also doesn't fix the problem. I noticed in my IE browser that it is not just cutting off the text but the actual scroll bar as well.

Any other ideas?

Edit : I found a post with an explanation of the problem, but I am not sure how to implement the solution. Here is the post :

> The problem is that there is more text at the bottom of
> the page, but the text is cut off, and there is no
> scrollbar in Mozilla. In IE 5, there is a scrollbar,
> but it doesn't go all the way down.
> What am I missing?

It's the way you are pushing down the .content divs.

Those two divs must appear low enough to make room for
the absolute header. They can be relatively offset, as
you have them doing, but when they do, they do it as
rigid boxes. (in this case, both boxes behave the same
as a single box would)

So when they are dropped, the bottom part of the second
div extends beyond the bottom of the body element, and so
can't be seen. Op6 is nice enough to also extend the body
far enough to accomodate it, but Moz and IE do not.

The fix is not to use relative offset to lower those divs,
but instead use a margin. A top margin on the body will
reliably do this. Top margins on the children of body
don't always work correctly (at the top of 'body').

 

[Jim_]

Why not just use an absolute position for the top and right sections, then just set the body's top and right margins?

 

[JustinWI]

got a quick code example for me? Also. see my edit to my last post.

Thanks

 

[Jim_]

#contentsBox{ position:relative;
top: 130px;

change that to

#contentsBox{ marin-top: 130px;

 

[JustinWI]

Just Tried. Same Result. If I switch "top : 130px;" to "top : 0px;". It will cut off the top and show the whole bottom. I believe this is the IE guillotine bug and I have tried some of the suggested fixes but nothing has worked.

I am going to keep messing with settings but feel free to throw out any more thoughts.

Thanks for the help.

Edit : There were also some flaws when testing in IE7 Beta 2, but now I have fixed those. So in summary, it will work in IE7 and FireFox, but not IE6 and Safari.