homepage Welcome to WebmasterWorld Guest from 54.166.116.36
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS position:fixed in IE - trying for imitation frames
Works in Gecko, Opera, Konqueror...
dingman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 328 posted 8:52 pm on Sep 26, 2002 (gmt 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?

 

Nick_W

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



 
Msg#: 328 posted 8:54 pm on Sep 26, 2002 (gmt 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

dingman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 328 posted 9:09 pm on Sep 26, 2002 (gmt 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.

aspr1n

10+ Year Member



 
Msg#: 328 posted 9:16 pm on Sep 26, 2002 (gmt 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>

Nick_W

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



 
Msg#: 328 posted 9:21 pm on Sep 26, 2002 (gmt 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

dingman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 328 posted 10:06 pm on Sep 26, 2002 (gmt 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.

Nick_W

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



 
Msg#: 328 posted 10:10 pm on Sep 26, 2002 (gmt 0)

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

Nick

dingman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 328 posted 11:22 pm on Sep 26, 2002 (gmt 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.

aspr1n

10+ Year Member



 
Msg#: 328 posted 11:45 pm on Sep 26, 2002 (gmt 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

dingman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 328 posted 1:51 am on Sep 27, 2002 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved