Welcome to WebmasterWorld Guest from 23.20.238.193

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)

WebmasterWorld Senior Member 10+ Year Member



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 Sep 26, 2002 (gmt 0)

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



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 Sep 26, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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 Sep 26, 2002 (gmt 0)

10+ Year Member



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 Sep 26, 2002 (gmt 0)

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



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 Sep 26, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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 Sep 26, 2002 (gmt 0)

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



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

Nick

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

WebmasterWorld Senior Member 10+ Year Member



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 Sep 26, 2002 (gmt 0)

10+ Year Member



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 Sep 27, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month