homepage Welcome to WebmasterWorld Guest from 23.23.22.200
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

This 50 message thread spans 2 pages: 50 ( [1] 2 > >     
Fixed Side Menus with CSS
Fixed CSS Navigation emulating frames
ranjan




msg:1224268
 7:31 pm on Jan 22, 2003 (gmt 0)

Someone in September had asked a question about emulating frames with CSS fixed property and its compatibility with IE6. Here is how to do it

1. In your main style sheet, set margin and padding to zero (needed for the following internet explorer hack) and declare the desired positioning like this:

body
{
margin: 0;
padding: 0;
}
div.nav {
position: absolute;
top: x;
left: y;
}
body>div.nav {
position: fixed;
}
2. For internet explorer 6, make a second style sheet and remove the scroll mechanism from the root element and assign it to the document body; position:absolute will work like position:fixed now.

html
{
overflow: hidden;
}
body
{
height: 100%;
overflow: auto;
}
3. In the head element call the style sheet for internet explorer after the main style sheet using the 'conditional comment', like this:

<link ... >//themain stylesheet
<!--[if IE 6]>
<link ... >//IE hack stylesheet
<![endif]-->

 

Nick_W




msg:1224269
 1:23 pm on Jan 23, 2003 (gmt 0)

Hi Ranjan, thanks very much for that!

Have you tested this in other browsers? I'm sure it won't be the same in everything right? -- What are the differences and can one live with them?

Nick

ranjan




msg:1224270
 4:14 pm on Jan 23, 2003 (gmt 0)

This is tested in the following:

1. Windows : IE 5, IE 6, Opera 6+, Mozilla 1+
which means it should work with NS 7+

2. Mac : IE 5.5

Works correctly with all these browsers

It will work as intended in MSIE5-MAC, MSIE6-PC, Netscape 6.2+, Netscape 7, Mozilla 1x, and Opera5+.

It will also degrade nicely in lesser browsers if an alternate stylesheet is made and linked using the <link> tag while importing the real style sheet.

WibbleWobble




msg:1224271
 4:52 pm on Jan 23, 2003 (gmt 0)

I've not tested it, but that reads like a fantastic hack/workaround.

<!--[if IE 6]>
<![endif]-->

Is that correct? It seems far too simple a syntax, and I've never really worked with ifthen statements before.

Perhaps we'll see people implementing fixed positioning before new versions of IE! Lovely jubbly.

Nick_W




msg:1224272
 4:55 pm on Jan 23, 2003 (gmt 0)

I think he means "insert your JS/PHP/ASP here.." WibbleWobble..

Nick

ranjan




msg:1224273
 5:39 pm on Jan 23, 2003 (gmt 0)

There is no ASP/JSP involved here. Yes its as simple as those comments. Its called IE's Conditional Comments. Read more about it here

[msdn.microsoft.com...]

madcat




msg:1224274
 5:57 pm on Jan 23, 2003 (gmt 0)

Did you say Win IE5.5 too?

Great find!

Nick_W




msg:1224275
 8:04 pm on Jan 23, 2003 (gmt 0)

Yes, nice work ranjan!

Don't have time to test this today (I'll take your word for it but, would like to see it myself ;)) but I will do this week...

Can't believe this is new news... I'd have thought we'd have seen it somewhere earlier but, once again, thanks for sharing it here!

Nick

ranjan




msg:1224276
 9:33 pm on Jan 23, 2003 (gmt 0)

Just wanted to add...

The fixed div can be horizontal too instead of vertical. However an extra wrapper div would be required to take care of scroll bar space.

DrDoc




msg:1224277
 10:54 pm on Feb 4, 2003 (gmt 0)

I can't get it to work :(
I'm currently testing in IE5.5

The navigation div won't stay put ..

SuzyUK




msg:1224278
 11:37 pm on Feb 4, 2003 (gmt 0)

DrDoc.

Yor DTD needs to be such that it actually triggers the quirks mode in IE (XHTML transistional is one which works for me)

also in the div nav

div.nav {
position: absolute;
top: x;
left: y;
}

have you specified an actual top: npx and left: npx rather than "x" and "y" (sorry if that sounds you know) but the first time I saw this code and pasted it I forgot to change the values and it took a minute to figure out why it wasn't working

Suzy

madcat




msg:1224279
 4:27 am on Feb 5, 2003 (gmt 0)

Can you throw up that DTD Suzy?

Much obliged

DrDoc




msg:1224280
 4:52 am on Feb 5, 2003 (gmt 0)

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DrDoc




msg:1224281
 5:03 am on Feb 5, 2003 (gmt 0)

See, it works in IE6, and in Opera (and any other browser that supports fixed properly) .. But it doesn't work in IE5.5 at all :(
The menu bar scrolls with the rest of the page ..

Did I miss something? Is it impossible to emulate frames in pre-IE6?

This is tested in the following:
1. Windows : IE 5, IE 6, Opera 6+, Mozilla 1+
which means it should work with NS 7+

2. Mac : IE 5.5

Works correctly with all these browsers


SuzyUK




msg:1224282
 7:33 am on Feb 5, 2003 (gmt 0)

Sorry Doc..I missed the 5.5 bit too..

I don't have 5.5 available for testing on just now..If I come up something I'll sticky you a link to test for us later...

Suzy

ranjan




msg:1224283
 8:12 am on Feb 5, 2003 (gmt 0)

This works on IE 5.5

Here is the codes

1. HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="styles/basic.css" rel="stylesheet" type="text/css">
<!--[if IE 6]>
<link href="styles/iehack.css" rel="stylesheet" type="text/css">
<![endif]-->

</head>

<body>
<div class="nav">
<p><a href="#">Home</a></p>
<p><a href="#">Next</a></p>
<p><a href="#">Next</a></p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. <a href="#">Curabitur</a> posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
<p>Sed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo. Nulla sapien lorem, tincidunt sit amet, lobortis laoreet, feugiat a, leo. Etiam id mauris in libero molestie dictum. Cras nisl diam, dapibus ut, sollicitudin sed, auctor nec, orci. Nam eleifend, dui in dapibus congue, mi diam luctus velit, eu imperdiet pede elit nec lorem. Proin laoreet, eros a dictum faucibus, nunc wisi rhoncus nunc, at rhoncus lectus tellus vitae urna. Curabitur a turpis at ligula lobortis cursus.</p>
<p>Donec convallis est id augue. Integer elit. Cras mi. Nulla ac tellus eget wisi facilisis egestas. Pellentesque ac lacus a quam pulvinar ornare. In congue fermentum risus. Pellentesque vitae ligula quis justo vehicula varius. Donec feugiat mi eu urna. Donec erat massa, posuere ac, adipiscing in, lobortis ac, nisl. Donec malesuada turpis sed arcu. Curabitur lacus. Donec eu elit.</p>
</div>
</body>
</html>

2. basic.css

body {
margin: 0px;
padding: 0px;
}
div.nav {
position: absolute;
width: 200px;
left: 0px;
top: 0px;
background: #AA9FAA;
padding-top: 30px;
padding-left: 0px;
height: 100%;
}
body>div.nav
{
position: fixed;
}

div.content {
margin-left: 220px;
padding: 0px;

}
div.content p {
font: 100% "Trebuchet MS", Arial, Geneva, san-serif;
color: #333333;
text-align: justify;
padding-top: 15px;
padding-right: 10px;
padding-left: 10px;
}
div.content a {
color: #6666CC;
}
div.content a:hover {
color: #CCCCCC;
background: #AA9FAA;
text-decoration: none;
}
.nav p {
font: 100%/1 Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
display: block;
padding-top: 0px;
margin: 0px;
padding-left: 10px;
}
div.nav a {
color: #FFFFFF;
background: #9faa9f;
width: 150px;
display: block;
margin: 0px;
padding-top: 6px;
padding-bottom: 1px;
padding-left: 20px;
text-decoration: none;
height: 18px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
div.nav a:hover {

color: #333333;
background: #999999;
width: 150px;
display: block;
margin: 0px;
padding-top: 6px;
padding-bottom: 1px;
padding-left: 20px;
text-decoration: none;
height: 18px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
3. iehack.css
html
{
overflow: hidden;
}
body
{
height: 100%;
overflow: auto;
}

I cannot post a link for the working script because of rules. sorry

SuzyUK




msg:1224284
 9:20 am on Feb 5, 2003 (gmt 0)

Sorry Ranjan that code pasted doesn't work for me in 5.5 (now have test station working..)

however I found this link [siteexperts.com] which explains a way to position using IE5 using expressions.

From this info I amended my test page by adding a conditional statement for IE5, code follows...
I've tested this in IE5.5 but the scroll is not "smooth"


<!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" xml:lang="en" lang="eng">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Frames By CSS</title>
<style type="text/css"><!--
body
{margin: 0; padding: 0;}
#menu {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
body>#menu
{position: fixed;}

#main{
margin-left: 210px;
padding: 0px 30px;
}

#logo{
height: 30px;
border: 1px solid green;
padding: 10px 0 20px 0;
text-align: center;
}
--></style>
<!--[if IE 6]>
<style type="text/css">
html
{overflow: hidden;}
body
{height: 100%; overflow: auto;}
</style>
<![endif]-->
<!-- this info from [siteexperts.com...] -->
<!--[if IE 5]>
<style type="text/css">
#menu {
top:expression(document.body.scrollTop+offsetHeight-offsetHeight);
left:expression(document.body.scrollLeft+offsetLeft-offsetLeft);
position: absolute;
}
</style>
<![endif]-->
</head>

<body>
<div id="main">
<div id="logo">LOGO HERE</div>
insert lots of your favourite foo text here!
</div>
<div id="menu">MENU BAR</div>
</body>
</html>

Anyhow...must go out now

Suzy

ranjan




msg:1224285
 11:23 am on Feb 5, 2003 (gmt 0)

Try This

<!--[if IE 5]>
<style type="text/css">
html
{overflow: hidden;}
body
{height: 100%; overflow: auto;}
</style>
<![endif]-->

Add this with the IE 6 conditional statement

DrDoc




msg:1224286
 9:31 pm on Feb 5, 2003 (gmt 0)

Still doesn't work as intended in IE5.5, ranjan. The links scroll with the rest of the page .. (which is ok, I guess. It's just as having a normal HTML page using no frames.)

madcat




msg:1224287
 10:10 pm on Feb 5, 2003 (gmt 0)

ranjan, you say you have it working in your IE5.5?

ranjan




msg:1224288
 11:00 pm on Feb 5, 2003 (gmt 0)

Unfortunately No. It was reported working on IE 5.5 by a friend.

I have tested in the browsers I had listed

DrDoc




msg:1224289
 9:04 pm on Feb 7, 2003 (gmt 0)

So what did your friend do to make it work?

ricfink




msg:1224290
 3:24 am on Feb 11, 2003 (gmt 0)

I have CSS code that works in IE 5.5 for this. I just have to clean it up a bit before posting. Probably tomorrow.

I've been working on a similar problem off and on for a few weeks, now.
Ranjan's posting got me thinking and put it over the top.

In the meantime - a couple of things:

There is really no need to have IE 5.5 in order to test for how IE 5.5 will work. (Unless you are using one of the few CSS properties that were added in version 6. And this code doesn't.)

As long as the document has no doctype, it will run in IE "Compatible" mode which is the equivalent of IE 5.5.

born2drv




msg:1224291
 5:08 am on Feb 11, 2003 (gmt 0)

If anyone can make this scrolling thing work, where...

1. The top logo and side menu are both fixed and stacked onto eachtoher (like an L-shape)
2. The content in the middle scrolls
3. Everything is centered on the page like one large table with a fixed width of say 700px
4. And is compatible for all browsers, please let me know.

I don't know much about CSS and can't seem to get it to work myself.

[edited by: Nick_W at 6:53 pm (utc) on Feb. 11, 2003]

theonliest




msg:1224292
 2:45 pm on Feb 11, 2003 (gmt 0)

"as the document has no doctype, it will run in IE "Compatible" mode which is the equivalent of IE 5.5..."

WRONG!

sorry for the dramatics but this myth has plagued me for the past few months; having designed a site using CSS positioning I just couldn't get everything to behave the same on IE6 and IE5.5(IE6 with no dtd in other words), I scrutinized Tanteks box hack model to the point of delusion and just couldn't understand the discrepancy. it just wouldn't match up. A while later I happened to test the site on an actual IE5.5 browser and it worked! all that pain for nought!
ergo, IE6 with no dtd is NOT equivalent to IE5.5
(and CSS positioning is not a new innovation to IE6 and shouldn't be thus dismissed)

I know I should probably have posted this reply elsewhere but that last IE6 'quirks mode' comment just pushed me over the edge, I had to vent my spleen on that one!

I need a cigarette...

ricfink




msg:1224293
 3:10 pm on Feb 11, 2003 (gmt 0)

A cigarette is a good idea and I'm going to smoke one as soon as I say this:

I sympathize with theonliest's frustration but
his contention that IE 6 in quirks mode is significantly different than 5.5 just doesn't make sense prima facie.

If the level of compatibility wasn't extremely high, IE6 would break pages constantly and it just doesn't.

theonliest's experience is unusual.

I do agree, however, that testing a page in IE6 in quirks mode is not a substitute for testing it in 5.5. They are different versions and each will have it's bugs and peculiarities.

I'd like to see some page code illustrating what theonliest feels is a major difference. And refresh me on "Tantek's Box Hack". Heard of it but don't remember exactly...

Gonna go have that smoke, now...

Nick_W




msg:1224294
 3:13 pm on Feb 11, 2003 (gmt 0)

Relevant Microsoft Document [msdn.microsoft.com]

Nick

theonliest




msg:1224295
 3:42 pm on Feb 11, 2003 (gmt 0)

OK for the record here's an abbreviated verion of the code that gave me problems;
on the stylesheet-

div.problembox{
position:absolute; width: 433px;
padding: 5px; margin: 0px; border: 1px
voice-family: "\"}\"";
voice-family:inherit;
width:421px;
}

html>body .problembox {
width:421px;
}

IE5.5 misinterprets this div width by placing the padding and border 'inside' the width instead of adding it on, as it should according to CSS1 specifications.
Tanteks 'box model hack' is the bit from 'voice family...' to the end, it makes little or no sense to me, but it works; it tells IE5.5 that the div width is 433px and IE6 that the div width is 421px (to which it then adds the 12px of padding and border) and so the box should render the same in both browers which it does! hooray!
however it does NOT render the same in IE6 with no dtd, basically the div is about 10px narrower than it should be!
this is the problem that tested my sanity in the first place.
if anyone wants to try that code be my guest!

ricfink




msg:1224296
 5:19 pm on Feb 11, 2003 (gmt 0)

Here is the 5.5 "quirks" mode version of Ranjan's posting:
(with a few comments at the tail end)
THIS WAS TESTED IN 5.5! As well as ie 6

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="basic_5.5.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="nav">
<p><a href="#">Home</a></p>
<p><a href="#">Next</a></p>
<p><a href="#">Next</a></p>
</div>
<div class="content">
<p>Content here...</p>
<div class="spacer"></div>
</div>
</body>
</html>

body {
margin: 0px;
padding: 0px;
overflow: hidden;
z-index: 1;
}
div.nav {
position: absolute;
width: 200px;
left: 0px;
top: 0px;
background: #AA9FAA;
padding-top: 30px;
padding-left: 0px;
height: 100%;
z-index: 6;
overflow: hidden;
}
div.spacer {
position: absolute;
margin-bottom: 0px;
width: 200px;
left: 0px;
bottom: 0px;
background: #AA9FAA;
height: 100%;
z-index: 5;
}
body>div.nav
{
position: fixed;
}

div.content {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
padding-left: 220px;
z-index: 4;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
div.content p {
font: 100% "Trebuchet MS", Arial, Geneva, san-serif;
color: #333333;
text-align: justify;
padding-top: 15px;
padding-right: 10px;
padding-left: 10px;
}
div.content a {
color: #6666CC;
}
div.content a:hover {
color: #CCCCCC;
background: #AA9FAA;
text-decoration: none;
}
.nav p {
font: 100%/1 Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
display: block;
padding-top: 0px;
margin: 0px;
padding-left: 10px;
}
div.nav a {
color: #FFFFFF;
background: #9faa9f;
width: 150px;
display: block;
margin: 0px;
padding-top: 6px;
padding-bottom: 1px;
padding-left: 20px;
text-decoration: none;
height: 18px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
div.nav a:hover {

color: #333333;
background: #999999;
width: 150px;
display: block;
margin: 0px;
padding-top: 6px;
padding-bottom: 1px;
padding-left: 20px;
text-decoration: none;
height: 18px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}

Explanation:

In IE 6 running in Strict mode (with a proper doctype) the html element is the topmost parent. The html element represents the canvas. The html element is what contains everything - the body element can actually have a width smaller or larger than the canvas.
In IE 5.5 or IE6 in "quirks" mode, the body element is topmost and represents the canvas. It's the body element that contains everything.

Ranjan's code relied on setting the height property on the body element to 100%. This was because it was necessary to set the height property on one of the div's below it, and the spec says that you can't set a height for a positioned element unless you've also set the height for it's immediate parent element. Without a height setting for the parent, the height setting for the child has no meaning.(Makes sense when you think about it.)
In quirks mode, setting the body height to 100% is meaningless because it's at the top - it's ALWAYS 100%. It contains everything.
Therefore, in order translate the technique to work in quirks mode, you have to treat the body element as you would the html element in strict mode. And then create a sort of pseudo-body element that lies directly on top of the body and then have THAT pseudo-body element contain everything. (The pseudo-body would be a div - appearing right after the body element in the code - with basic CSS properties being: position:absolute;left:0px;right0px;height:100%;width:100%)
The example works according this principle (the pseudo-body element is the content div).
But I had to change it slightly because there was a catch: when the text content was less than a screenfull, the Navigation div stopped where the text in the body element stopped and looked "cut off". So, to prevent that, I resorted to trickery and created another empty div of the same color to act as a background to the Navigation div to "fill in" the screen in case the text in the body element was shorter than the screen.
A little inelegant, but not my fault.

[edited by: Nick_W at 5:25 pm (utc) on Feb. 11, 2003]
[edit reason] Sticky mail coming.... [/edit]

ricfink




msg:1224297
 5:49 pm on Feb 11, 2003 (gmt 0)

Reply to theonliest:

"however it does NOT render the same in IE6 with no dtd, basically the div is about 10px narrower than it should be!"

I'm missing what the problem is. IE 5.5 does not recognize DTD's. Therefore, if you say that the code works with IE6 in "strict" mode with a doctype, then what are you losing by putting in the doctype?
IE 5.5 will ignore it and render as usual and IE6 will render it correctly as well, you say.

What am I missing here?

(By the way, off the top of my head, the 10px discrepancy is probably due to the fact that in "strict" mode, the default offset between the body and the html element is as if the body element had properties margin-top: 15px and margin-left: 10px. (Actually it DOES have those properties by default in strict mode.)
To get the canvas (html) and the body totally overlapped, set those properties to 0px for body.
Make a test page and give the html element and the body element different background colors and you'll see what I mean.)

This 50 message thread spans 2 pages: 50 ( [1] 2 > >
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