Forum Moderators: not2easy
I've scanned dozens of posts and logs looking for ideas.
No results, and I need guidance. Help please :>)
Using XHTML and CSS, I have a "framelike" header,
specified with position:absolute.
It contains a horizontal navigation section, built
from lists that fire content change on the iframe
below, or replaces the whole page. All works well.
This iframe is in a div below and it scrolls, it's position:fixed, with top=same height as the header, and
bottom=0
All works well in MS/Navigator, MS/Firefox, LX/Firefox,
and all others I've tried.
But in MS/IE6, the scrollbar won't show about the last 30/40 px of the div/iframe.
If I drop extra text inside the bottom of the div/iframe, I get to see the new text, but still not the last 30/40 px of the div/iframe.
Too kludgy for me, and makes the FF visualisation
rather clunky.
I've tried height= 100% on various combinations of
html/body/div/iframe , but no luck yet.
Any one got any super ideas, or do I need to construct a mini-example and post?
Cheers!
if so have you tried adding a width to that div/element.
as a test try adding * {zoom: 1;} to the end of the stylesheet if that works then yes you're looking for an element that requires layout (a dimension)
it sounds like this one of the named IE "bugs" listed on PIE and I would've thought that the dimension trick would cure it! However if the zoom debug test doesn't work then post your example code.
Suzy
There is no position:relative in my content.
zoom had no effect
So, ok, here's a "small" test sample.
You might need more text to cause scrolling to occur,
but I've verified this example shows the problem.
Please ignore gifs and jpgs that are referenced, I don't think they matter.
And I haven't stripped out everything else either.
Sorry if it makes it hard to read?
PS. "middle" is actually a misnomer, as there is no
corresponding "footer" on the main page.
So, first up the main page: testbed.htm
------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="top">
<head>
<link rel="stylesheet" type="text/css" href="testscroll.css" title="Scroller"></link>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<meta http-equiv="Content-Language" content="en,fr,de"></meta>
<meta name="Revisit-After" content="14 days"></meta>
<title>Scrolling CSS</title>
</head><body class="top">
<div id="header">
<div id="main-image"><!-- End main-image --></div>
<div id="nav-buttons">
<ul id="nav-pages">
<li id="nav-1"><a target="page_content" class="menu" href="testscroll.htm">Item 1</a></li>
<li id="nav-2"><a target="page_content" class="menu" href="testscroll.htm">Item 2</a></li>
<li id="nav-3"><a target="page_content" class="menu" href="testscroll.htm">Item 3</a></li>
</ul>
<!-- End nav-buttons --></div>
<!-- End header --></div><div id="middle">
<iframe id="page_content" name="page_content" src="testscroll.htm">
Your browser cannot display inserted frames or is currently configured not to display them.</iframe><!-- End middle --></div>
</body></html>
------------------------------
And now the content html: testscroll.htm
------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="testscroll.css" title="Scroller"></link>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<meta http-equiv="Content-Language" content="en,fr,de"></meta>
<meta name="Revisit-After" content="14 days"></meta>
<title>Scrolling CSS</title>
</head>
<body>
<div id="principal_content">
<h1>Introduction:</h1>
<ul>
<li><p>Several lines of info</p></li>
<li><p>Several lines of info</p></li>
<li><p>Several lines of info</p></li>
<li><p>Several lines of info</p></li>
<li><p>Several lines of info</p></li>
<li><p>Several lines of info</p></li>
</ul><p>insert lots favourite foo text...........</p>
<!-- End principal_content -->
</div><div id="principal_footer"><p>footer text</p><!--End principal_footer -->
</div>
</body></html>
-----------------------------------
And now the CSS file: testscroll.css
-----------------------------------
html { border: 0; height: 100%; }
html.top { border: 1; }/* Take control of scrollbars in all browsers, all windows Too many browser variants to use defaults */
html.top { overflow: hidden; }
body.top { overflow: hidden; height: 100%; max-height: 100%; }/* Remove default margins from almost everything */
body { margin: 0;padding: 0;border: 0; display: inline-block;}img { margin: 0; padding: 0; border: 0; }
/* Frame-like top header with navigation */
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 116px;
background-image: url(images/background_main.jpg);
}#main-image {
height: 47px;
background: url(images/logo_top.gif);
background-position: center top;
margin-top: 20px;
background-repeat: no-repeat;
}/* NAVIGATION */
/* A little trick to center the buttons container div
and which works in ALL browsers on ALL platforms */
#nav-buttons {
position: absolute;
left: 50%;
margin-top: 15px;
margin-left: -460px;
width: 920px;
}/* Make the navigation lists look like buttons */
ul#nav-pages{
margin: 0;
padding: 0;
list-style-type: none;
}ul#nav-pages li{
display: block;
float: left;
}/* Page Content */
#middle {
position: fixed;
top: 116px;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
border: none;
overflow: auto;
background-image: url(images/background_main.jpg);
}/* Internet Explorer Hack */
* html body.top { padding: 116px 0 0 0; }
* html #middle { height: 100%; width: 100%; }iframe#page_content {
width: 100%;
height: 100%;
border: none;
padding: none;
margin: none;
overflow: hidden;
background-image: url(images/background_main.jpg);
}#principal_content {
width: 71%;
margin-left: 13.5%;
padding-left: 3%;
padding-top: 15px;
padding-bottom: 8px;
border: 3px #000000 outset;
background-color: #FFFFFF;
}#principal_footer {
width: 74%;
height: 150px;
margin-left: 13.5%;
margin-bottom: 10px;
background-color: #FFFFFF;
color: #003300;
border: 2px #000000 outset;
font-family: Verdana;
font-size: 7pt;
text-align: center;
}
[edited by: SuzyUK at 1:24 pm (utc) on Sep. 27, 2005]
[edit reason] tidied/shortened code formatting [/edit]
you're using all four of the Absolute Positioning Properties (top, right, bottom, left) on the #middle div to make it take up the rest of the screen, i.e. Screen height less 116px. This is the right thing to do for compliant browsers, but you've guessed it IE doesn't play ball!
First though using that logic above, you need to remove the scrollbar from the middle div and instead let the iframe have it's own scrollbar (so just swap the overflow properties back to that way.)
then we need to find some other way to get IE to calculate the middle divs height to be 100% - 116px, because it won't do it with the AP properties alone.. the only way I know of doing this just yet is a bit of proprietary CSS, an expression (it requires Javascript turned on to work though)
Here's the snippet of the bit of your code that should fix it, also notice I changed position fixed: to position absolute. IE doesn't support fixed, but in this case absolute will do the same job.
/* Page Content */#middle {
/*position: fixed; changed to absolute*/
position: absolute;
top: 116px;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
border: none;
/* overflow: auto; changed to hidden */
overflow: hidden;
background-image: url(images/background_main.jpg);
}/* Internet Explorer Hack */
/* hide from mac \*/
* html #middle {
height:expression(document.body.clientHeight - 116 + "px");
width: 100%;
}
/* end hide */iframe#page_content {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
/* overflow: hidden; leave at auto default */
background-image: url(images/background_main.jpg);
}
see how that goes..
and mind my manners!
Welcome to WebmasterWorld chapteryx!
Hey, great response, very quick, but I think I
must have missed something.
Changing the overflow between middle and the iframe
worked just fine in MS land, but on my Linux box with
firefox, the scrollbar appears but I can't get focus
on the text to scroll it. It won't move at all.
Not good, dude :-)
But I don't think that matters too much right now.
Onwards to MS land, though.
I made the position change and the overflow change
that you suggested, and put in that expression.
Result: no change.
Sorry, I wish I could tell a happy story.
Did you make any other changes than those 4 you
mentioned?
And thanks for the welcome :-))
Nice to be here ..
I removed the
* html body.top { padding: 116px 0 0 0; }
PS: not sure about the Focus problem, even FF (PC) is focusing fine with this method and usually it's it which has focus problems on overflowing divs, but that's why I suggested putting the scrollbars/focus back on the iframe, it should take the focus no problem, Try giving that middle div a high z-index see if that helps..
Suzy
