IE cuts off bottom of page

[$0.50]

I've been having trouble with IE cutting off the bottom of the web page (verticle scrolling stops). It works fine in other browsers and I only seem to experience the problem when using CSS. Does anyone know what is going on?

Many Thanks

[Alon C.]

Try to add this code (It might help) :

<SCRIPT LANGUAGE="JavaScript">
<!--
parent.resizeTo(screen.availWidth, screen.availHeight);
parent.moveTo(0, 0);
// -->
</SCRIPT>

[Alexpte]

I am having this exact problem too, I tried adding the piece of javascript but still having the same problem.

My page displays fine in firefox but in IE the footer is cut off (at least you can't scroll down to it).

Anyone have any ideas as to how I can fix this?

[bathurst_guy]

link?

[Alexpte]

Here's a link, it's a work in progress.

http://www.tights4flights.com/3rd/index.htm

[bokeh]

Don't use javascript. Doing so would be out of despiration. Sort out the CSS.

[JPnyc]

My guess is you set a height for the body and it's inadequate. Please post the css.

[Alexpte]

No I haven't set a heigh for body, heres the css


/* CSS Document */
body
{
background-color:#E3E3FD;
font-family:arial, Helvetica, sans-serif;
color:#003366;
font-size:0.8em;
margin:0pt;
padding:0pt;
}

a:link
{
font-family:arial, verdana;
color:#330099;
font-size:1em;
font-weight:bold;
text-decoration:none;
}

a:visited
{
font-family:arial, verdana;
color:#330099;
font-size:1em;
font-weight:bold;
text-decoration:none;
}

#button a
{
float:left;
position:relative;
font-family:arial, verdana;
color:#800000;
font-weight:bold;
text-decoration:none;
display:block;
height:25px;
width:10%;
background-image:url(../images/button.gif);
margin-left:7%;
border-right:1px solid #8686d6;
border-left:1px solid #8686d6;
}

#button a:hover
{
float:left;
position:relative;
font-family:arial, verdana;
color:#800000;
font-weight:bold;
text-decoration:none;
display:block;
width:10%;
height:25px;
background-image:url(../images/menu.gif);
margin-left:7%;
border-right:1px solid #8686d6;
border-left:1px solid #8686d6;
}


#page
{
display:block;
width:80%;
position:relative;
left:10%;
top:30px;
text-align:center;
background-color:#FFFFFF;
border:1px solid #8686d6;
}

#header
{
position:relative;
width:100%;
border-bottom:1px solid #8686d6;
}

#menu
{
position:relative;
width:100%;
background-color:#FFFFFF;
background-image:url(../images/menu.gif);
background-repeat:repeat-x;
border-right:0px solid #8686d6;
border-left:0px solid #8686d6;
border-bottom:1px solid #8686d6;
border-top:0px solid #8686d6;
line-height:1.8em;
text-align:center;
}

#body-content
{
position:relative;
width:100%;
background-color:#FFFFFF;
padding-top:30px;
text-align:left;
}

#footer
{
position:relative;
width:100%;
background-image:url(../images/menu.gif);
background-repeat:repeat-x;
margin-top:30px;
}

.images
{
padding-left:40px;
padding-right:30px;
float:left;
}





Thanks for any help

[Alon C.]

Try to add this code as followed:


<div id="footer">
Design &copy; Alex Terris
</div>
</div>

<pre> <!-- <<< Try to add this "<pre>" -->









</pre>

</body>
</html>

[prouton]

Your use of relative positioning is creating your problem. You've basically pushed your #page div off the bottom of the bottom of your screen (at least as far as IE is concerned). Notice that there's no blue margin at the bottom of the page as there is in Mozilla (Firefox or Netscape). Adding a bottom-margin to the body definition will solve this.

The "pre" suggestion creates more white area below the footer, making it visible, but doesn't force the bottom blue margin, and is a bit tacky (well, it is, you know).

You could also abandon the use of relative positioning throughout and just use the default of static. You can center the page by giving your #page div left and right margins of "auto".

[Alexpte]

Thanks!

Using the static positioning combined with the auto margins worked perfectly.