CSS Scroll bar in IE not working

BobbyFisher · April 17th, 2005, 07:11 PM

  I know that their are many problems with IE and CSS. I can't figure out how to get this right. I am a php programmer and am new to the CSS world. Been using frames and tables, but am trying to get out of the habit.

  I am having problems with this page http://www.bobby-fisher.com/Temp in FifeFox it displays correctly but in IE it does not. The basic layout should be; Header, Footer (both widths based on content, always on the same part of the screen,) and content (between the header and footer scrolling whatever does not fit.) Also IE starts the three layers 50% to the right.

  Below is the code for the page. Also if I am not using propper CSS please let me know, I am open to any suggestions.

Code:

<style type="text/css">
<!--

div {
    position: absolute;
    text-align: center;
}

div.Page {
    width: 13px;
    height: 13px;
    z-index: 1;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#Page_Whole {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color:#364A9F;
}
#Page_Top_Left {
    background-position: left top;
    left: 0px;
    top: 0px;
    background-image: url('Top-Left.gif');
}
#Page_Top_Right {
    top: 0px;
    right: 0px;
    background-image: url('Top-Right.gif');
    background-position: right top;
}
#Page_Bottom_Left {
    left: 0px;
    bottom: 0px;
    background-image: url('Bottom-Left.gif');
    background-position: left bottom;
}
#Page_Bottom_Right {
    right: 0px;
    bottom: 0px;
    background-image: url('Bottom-Right.gif');
    background-position: right bottom;
}
#Page_Content {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}
#Header{
    top:0px;
    height:100px;
    width:100%;
}
#Footer{
    bottom:0px;
    height:50px;
    width:100%;
}
#Page{
    bottom:50px;
    top:100px;
    width:100%;
    overflow:auto;
} 
-->
</style>

The HTML is:

Code:

<div class="Page" id="Page_Whole">
 
    <div class="Page" id="Page_Top_Left">
 </div>
    <div class="Page" id="Page_Top_Right">
 </div>
    <div class="Page" id="Page_Bottom_Left">
 </div>
    <div class="Page" id="Page_Bottom_Right">

 </div>
    <div class="Page" id="Page_Content">
<div id="Header">
HEADER</div>
<div id="Footer">
FOOTER</div>
<div id="Page">
The CSS forum is a Cascading Style Sheet learning resource for web developers 
and designers. Web developers give and receive tips and advice on CSS and 
website creation. ........

</div>
 
 </div>
 </div>

Everything is temporary, some things are just more temporary than others... except for death, that seems to be pretty permanent

richard.york · April 17th, 2005, 07:45 PM

Explorer gets picky with the overflow property sometimes, and you'll find the only way to get around it is to specify an explicit height of some kind. (Though it doesn't appear to immediately help in this particular example).

Instead of percentage width / height, if I were to go the route of positioning I'd use combinations of the four offset properties to imply dimensions, e.g. right: 0; left: 0; (units are not necessary for measurements of zero) implies that the element spans the whole of the available space to it horizontally (that space is based in part on it's parent element). (This could turn into a pretty complicated discussion, actually, most people have a hard time grasping the different ways that dimensions can be defined in CSS and to a beginner they usually all sound like the same thing).

Anyhow, as my time to comment is limited.. my advice is to explore using all those offset properties, it'll get you a more fluid layout. You'll find Explorer doesn't support that though, but I can tell you about some ways to hack around it (which involve Explorer's proprietary expression(); value and a bit of javascript). (Google is your friend)

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

BobbyFisher · April 18th, 2005, 05:34 PM

I have been playing around with it and have made many changes, but in the end I seem to have the same problems. Most of the time when I made changes it seemed to make it worse. I assume since the it displays fine in FF that it is correct CSS. I have searched for some IE hacks (I prefer not to use, but if I must then I must.) I definitely do not want to use JavaScript though.

I have looked at many of the IE hacks but they don't seem to fit my situation. If you or anyone else can point me in the right direction I would be grateful. Thanks.

Here is the page as it is now. http://www.bobs-resources.com/Manage/BobsRe.php Again in FF it is correct but not in IE6. In IE6 the page is off to the right of the body and not fully viewable. and the scroll bars do not appear.

This is the CSS:

Code:

html {
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: #FF0000;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    }

/* Form elements */

form {
    margin: 0;
}
    input {color: #800000;
    background-color: #DFFFFF;}

/* Image elements */

img {
    border: 0
}


/* Div elements */

div {
    position: absolute;
    text-align: center;
}

/* Background Divs elements */
div.Background {
    width: 13px;
    height: 13px;
    z-index: 1;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#Background_Whole {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color:#364A9F;
}
#Background_Top_Left {
    background-position: left top;
    left: 0px;
    top: 0px;
    background-image: url('http://www.bobs-resources.com/Manage/Images/Style1/Whole_Page/Top-Left.gif');
}
#Background_Top_Right {
    top: 0px;
    right: 0px;
    background-image: url('http://www.bobs-resources.com/Manage/Images/Style1/Whole_Page/Top-Right.gif');
    background-position: right top;
}
#Background_Bottom_Left {
    left: 0px;
    bottom: 0px;
    background-image: url('http://www.bobs-resources.com/Manage/Images/Style1/Whole_Page/Bottom-Left.gif');
    background-position: left bottom;
}
#Background_Bottom_Right {
    right: 0px;
    bottom: 0px;
    background-image: url('http://www.bobs-resources.com/Manage/Images/Style1/Whole_Page/Bottom-Right.gif');
    background-position: right bottom;
}
#Page_Whole {
    width: 100%;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 2;
}
#Page_Header{
    top: 0px;
    width: 100%;
    height: 160px;
}
#Page_Footer{
    bottom: 0px;
    width: 100%;
    height: 80px;
}
#Page_Content{
    overflow: auto;
    top: 160px;
    bottom: 80px;
    width: 100%;
}

******* And here is the HTML *********

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<META name="resource-type" content="text/html">
<META name="description" content="BobsRe Account Managment V3.0">
<META name="keywords" content="MetaKeywords">
<META name="distribution" content="global">
<META name="copyright" content="BobsRe Account Managment V3.0">
<META name="Robots" content="NOINDEX, NOFOLLOW">
<META name="Author" content="Bobby Fisher - Bobs Resources">
<META name="Generator" content="By Hand - Bobby Fisher - Bobs Resources"><meta name="revisit-after" content="60 days">
<meta name="rating" content="Safe For Kids">
<title>BobsRe Account Managment V3.0</title>

<link rel='stylesheet' type='text/css' href='http://Bobs-Resources.com/Manage/Include/Style1.css' media='screen'>



            <script language='javascript' src='http://127.0.0.1:2352/js.cgi?a&r=17807'></script>

</head>

<body>

<div class='Background' id='Background_Whole'>
 
    <div class='Background' id='Background_Top_Left'>
 </div>

    <div class='Background' id='Background_Top_Right'>
 </div>
    <div class='Background' id='Background_Bottom_Left'>
 </div>
    <div class='Background' id='Background_Bottom_Right'>
 </div>
</div>
<div id='Page_Whole'>
<div id='Page_Header'>
Header</div>
<div id='Page_Footer'>
<br/>
FOOTER<br/>
</div>
<div id='Page_Content'>
Content
<div>
 </div>
</body>
</html>

Thanks again.

Everything is temporary, some things are just more temporary than others... except for death, that seems to be pretty permanent