Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
| Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old April 17th, 2005, 07:11 PM
Authorized User
 
Join Date: Apr 2005
Location: Spring Hill, Florida, USA.
Posts: 28
Thanks: 0
Thanked 0 Times in 0 Posts
Default CSS Scroll bar in IE not working

  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
__________________
Everything is temporary, some things are just more temporary than others... except for death, that seems to be pretty permanent
  #2 (permalink)  
Old April 17th, 2005, 07:45 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
  #3 (permalink)  
Old April 18th, 2005, 05:34 PM
Authorized User
 
Join Date: Apr 2005
Location: Spring Hill, Florida, USA.
Posts: 28
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS scroll bar code hijacked by <!DOCTYPE tag mat41 CSS Cascading Style Sheets 5 January 17th, 2008 06:06 PM
How can I make two scroll bar to be the same one? Daniel_hn Visual C++ 1 September 16th, 2003 09:28 AM
css and scroll bar markhardiman HTML Code Clinic 3 July 18th, 2003 04:55 AM
Scroll Bar cooldude87801 BOOK: Beginning Java 2 0 June 18th, 2003 11:59 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.