Welcome to WebmasterWorld Guest from 54.163.49.19

Forum Moderators: not2easy

Message Too Old, No Replies

CSS position:fixed in IE - trying for imitation frames

Works in Gecko, Opera, Konqueror...

     
8:52 pm on Sep 26, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 12, 2002
posts:885
votes: 0


I'm trying to achieve a frames-like layout with a <div> at the top of the page, and one on the left, that don't move when you scroll the rest of the page. I also want the "main" content to come first in the source, so that if you're looking at the page with a screen reader, lynx, or some other browser that doesn't much do layout, you see the content first and the site navigation stuff later.

It works in Opera 6, Konqueror, and several Mozilla-based browsers. However, in IE it's a mess - about the only thing it honors is my margin settings.

The CSS looks something like this (in an external file):

body
{
color: #000000;
background: #ffffff;
margin-left: 10.5em;
margin-top: 10.5ex;
}

#navbar
{
background: lightblue;
vertical-align: top;
position: fixed;
left: 0px;
top: 0px;
height: 100%;
width: 9em;
padding: .5em;
}

#header
{
position: fixed;
background: #ffffff;
top: 0px;
height: 10ex;;
}

and the HTML looks like:
<div id="main">
The main content of the page
</div>

<div id="footer">
a witty quote from `fortune` - my users love this.
</div>

<div id="navbar">
Site navigation
</div>

<div id="header">
Site title, greeting, status kinds of stuff
</div>

This has its quirks - there doesn't seem to be a reliable way to make the header as wide as the rest of the page without making it scroll, for example - one thing works in Gecko, another in Opera - and Opera likes to display form elements right through the fixed-position divs if they get scrolled there, but it seemed promising until I looked at it in IE. Is there any hope here?

8:54 pm on Sept 26, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Well, possible someone will come along and embarass me but, it's not possible in IE

IE doesnt supprot this property as far as I know....

Nick

9:09 pm on Sept 26, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 12, 2002
posts:885
votes: 0


Shucks. That rather limits the usefulness of the new theme I was hoping to make available for my community site. I've always refused to do frames when such was in my control, but kinda wanted that feature, especially for the navbar. Any hope doing simething like floating the navbar content inside a left absolutely-positioned <div> to keep the navigation information from scrolling off the screen when the content is long? I was hoping I could not only abandon a table layout but also address a functional problem with it at the same time.
9:16 pm on Sept 26, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 18, 2002
posts:161
votes: 0


Sorry Nick ;)


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body{
}
#main{
margin-left: 9em;
}
#footer{
margin-left: 9em;
}
#navbar{
width: 9em;
left: 0px;
top: 0px;
background-color: lightblue;
height: 100%;
float: left;
position: absolute;
}
#header{
margin-left: 9em;
}
</style>
</head>
<body>
<div id="main">The main content of the page</div>
<div id="footer">a witty quote from `fortune` - my users love this.</div>
<div id="navbar">Site navigation</div>
<div id="header">Site title, greeting, status kinds of stuff</div>
</body>
</html>
9:21 pm on Sept 26, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Alright, Im not in Win, and I've had a few beers and don't wanna reboot ;)

I await the verdict eagerly ;)

Are we talking IE6 that that works on?
I was pretty sure 5+ wouldnt do it....

Nick

10:06 pm on Sept 26, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 12, 2002
posts:885
votes: 0


Just tried in IE6on my wife's machine (Bochs is a a dog, and Wine doesn't like IE last I checked. Haven't tried Plex86 yet.), and it sorta works - floating the navbar works, but unless there is a 'float: top' not documented in the CSS2 spec, it's no good for my headder positioning.
10:10 pm on Sept 26, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Yeah, I was pretty sure this was a no no, but not able to test...

Nick

11:22 pm on Sept 26, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 12, 2002
posts:885
votes: 0


Two other questions if anyone is up for them.

(1) Is there a way, without sacraficing my nice structural mark-up, to make the header div in that first example fill all the horizontal space to the right of the navbar? Setting its width property to "100%" makes it as wide as the viewport, and therefore makes it go off the screen to the right. In Gecko, that's OK as long as there isn't content that far right in the <div>, so it doesn't scroll. In Opera, though, it scrolls left-right no matter what. I can get the width I want in Opera by setting some element inside the div to 100% width, but Gecko doesnt care about that unless that element is actually going to take all the space.

(2) Can I make the footer div stick to the bottom of the viewport when the page is otherwise not long enough to get it there, and the bottom of the page if the pages is long enough to scroll, without Javascript?

I know, I'm asking a lot and some of this may not be doable, but I also know there are people here who know far more about CSS than I do yet.

11:45 pm on Sept 26, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 18, 2002
posts:161
votes: 0


This is starting to sound like a challenge ;)

Here are another two. All 3 work fine in IE6, Mozilla 1.1, Opera 6.05

And your heading's fixed.

--------------------------------------------------------------

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body{
}
#main{
margin-left: 9em;
margin-top: 20px;
}
#footer{
margin-left: 9em;
}
#navbar{
width: 9em;
left: 0px;
top: 0px;
background-color: lightblue;
height: 100%;
float: left;
position: absolute;
}
#header{
float: left;
left: 9.5em;
top: 0px;
position: absolute;
}
</style>
</head>
<body>
<div id="main">The main content of the page</div>
<div id="footer">a witty quote from `fortune` - my users love this.</div>
<div id="navbar">Site navigation</div>
<div id="header">Site title, greeting, status kinds of stuff</div>
</body>
</html>

-----------------------------------------------------------------

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body{
margin-left: 150px;
}
#main{
margin-top: 25px;
}
#footer{
}
#navbar{
width: 150px;
left: 0px;
top: 0px;
background-color: lightblue;
height: 100%;
position: absolute;
}
#header{
left: 150px;
top: 0px;
position: absolute;
}
</style>
</head>
<body>
<div id="main">The main content of the page</div>
<div id="footer">a witty quote from `fortune` - my users love this.</div>
<div id="navbar">Site navigation</div>
<div id="header">Site title, greeting, status kinds of stuff</div>
</body>
</html>

asp

1:51 am on Sept 27, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 12, 2002
posts:885
votes: 0


Nope, the heading's not fixed. Absolute scrolls with the page, I want it nailed to the viewport.

Thanks, though. I'm kinda new to positioning with CSS.