Navigation Bar with scrollbar, difficult to explain

**Nile** · 07-03-2008, 07:57 PM

Can I see your test page?

**Nile** · 07-03-2008, 10:52 PM

Originally Posted by k12onos

wow it works great! thanks again! , anyway i tested it on IE, and it works just fine, what do you mean by fixed position doesnt work in IE? because in firefox and IE it looks the same

In IE if you add content, the nav won't scroll. Anyways, here's the updated menu:

HTML Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fixed Menus, CSS Fixed IE" />
<meta name="description" content="Fixed Menu - Tested in IE, FF, and Safari" />
<title>Fixed Menu - Tested in IE, FF, and Safari</title>
<style type="text/css">
body {
margin: 0;
height: 100%;
}
#content {
text-indent: 15px;
color: #B00B0B;
font-size: 14px;
padding-left: 210px;
padding-top: 100px;
}
#header {
color: #B00B0B;
font-size: 80px;
font-family: arial;
font-weight: bold;
text-align: center;
}
#navigation {
font-family: arial;
width: 190px;
height: 99%;
overflow: scroll;
background-color: #F1F1F1;
padding-left: 10px;
position: fixed;
}
#navigation .link{
font-size: 13px;
color: #A00B0A;
font-weight: bold;
}
#navigation a:link, a:visited {
display: block;
font-size: 70%;
text-decoration: none;
color: #000;
}
#navigation a:hover {
text-decoration: underline;
}
#navigation hr {
margin-top: 15px;
color: #A00B0A;
}
#navigation p {
text-indent: 15px;
color: #A00B0A;
font-size: 10px;
}
#navigation p span {
text-indent: 0px;
overflow: scroll;
}
</style>
<!--[if IE]>
<style type="text/css">
#navigation {
padding-top: 10px;
position:absolute;
left: 0px;
top:expression(body.scrollTop+"px");
}
#content {
padding-left: 200px;
}
</style>
<![endif]-->
</head>
<body>
<div id="navigation">
<h5 class="page">Home</h5>
<span class="link">Links</span>

<span class="links">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</span>
<hr />
<p>This page was tested in <b>FireFox 3</b>, Internet Explorer 7, and Safari 3.1. It's a simple menu with fixed positioning, this means that when the page scrolls down, so does the menu. I managed to fix the fixed positioning in IE using the script below. <br />
<span style="display: block; width: 170px; height: 56px; background-color: lightyellow;"><code>
position:absolute;<br />
left: 0px;<br />
top:expression(body.scrollTop+"px");

</code></span></p>
</div>
<div id="header">HomePage</div>
<div id="content"><p>Lorem ipsum <b><i>dolor</i></b> sit amet, consectetuer adipiscing elit. Phasellus at metus. Nam ut pede et nisi elementum ultrices. Fusce ut neque. Nam fringilla semper purus. Morbi laoreet. Curabitur pulvinar. Integer commodo iaculis tellus. Nulla aliquet augue eu lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et nisi. Sed id erat et dolor pretium mattis.</p>
<p>
Duis condimentum interdum lectus. Nullam vestibulum, ligula quis molestie <b>pellentesque</b>, dui diam blandit nulla, vel vehicula est nisl quis tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum libero risus, laoreet ac, dictum at, pellentesque nec, magna. Praesent eget mi. Pellentesque lectus sem, molestie et, commodo at, placerat ut, nisl. Cras pulvinar leo posuere felis. Praesent tincidunt enim eget erat. In a leo vitae purus imperdiet consequat. Mauris elit ligula, mattis sodales, consectetuer at, accumsan a, nunc. Fusce tristique diam a odio. </p>
<p>
Aenean fermentum. Suspendisse commodo felis eget sem. Nunc elit. In sit amet quam quis massa fringilla semper. Duis ullamcorper tincidunt tellus. Nam sed ante sed eros gravida imperdiet. Pellentesque pulvinar ultrices ante. Donec adipiscing adipiscing quam. Nulla ac tortor quis elit tincidunt malesuada. In egestas est vel nunc. Donec auctor facilisis neque. Curabitur nec diam at eros gravida tempus. Phasellus tincidunt risus. Phasellus in sem a tellus dictum vulputate. Phasellus nunc. Integer pharetra. Maecenas ornare enim eu odio. Suspendisse consequat blandit tellus. Curabitur est ante, luctus id, tempor non, rhoncus ac, ipsum. </p><p>Lorem ipsum <b><i>dolor</i></b> sit amet, consectetuer adipiscing elit. Phasellus at metus. Nam ut pede et nisi elementum ultrices. Fusce ut neque. Nam fringilla semper purus. Morbi laoreet. Curabitur pulvinar. Integer commodo iaculis tellus. Nulla aliquet augue eu lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et nisi. Sed id erat et dolor pretium mattis.</p>

<p>
Duis condimentum interdum lectus. Nullam vestibulum, ligula quis molestie <b>pellentesque</b>, dui diam blandit nulla, vel vehicula est nisl quis tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum libero risus, laoreet ac, dictum at, pellentesque nec, magna. Praesent eget mi. Pellentesque lectus sem, molestie et, commodo at, placerat ut, nisl. Cras pulvinar leo posuere felis. Praesent tincidunt enim eget erat. In a leo vitae purus imperdiet consequat. Mauris elit ligula, mattis sodales, consectetuer at, accumsan a, nunc. Fusce tristique diam a odio. </p>
<p>
Aenean fermentum. Suspendisse commodo felis eget sem. Nunc elit. In sit amet quam quis massa fringilla semper. Duis ullamcorper tincidunt tellus. Nam sed ante sed eros gravida imperdiet. Pellentesque pulvinar ultrices ante. Donec adipiscing adipiscing quam. Nulla ac tortor quis elit tincidunt malesuada. In egestas est vel nunc. Donec auctor facilisis neque. Curabitur nec diam at eros gravida tempus. Phasellus tincidunt risus. Phasellus in sem a tellus dictum vulputate. Phasellus nunc. Integer pharetra. Maecenas ornare enim eu odio. Suspendisse consequat blandit tellus. Curabitur est ante, luctus id, tempor non, rhoncus ac, ipsum. </p><p>Lorem ipsum <b><i>dolor</i></b> sit amet, consectetuer adipiscing elit. Phasellus at metus. Nam ut pede et nisi elementum ultrices. Fusce ut neque. Nam fringilla semper purus. Morbi laoreet. Curabitur pulvinar. Integer commodo iaculis tellus. Nulla aliquet augue eu lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et nisi. Sed id erat et dolor pretium mattis.</p>
<p>
Duis condimentum interdum lectus. Nullam vestibulum, ligula quis molestie <b>pellentesque</b>, dui diam blandit nulla, vel vehicula est nisl quis tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum libero risus, laoreet ac, dictum at, pellentesque nec, magna. Praesent eget mi. Pellentesque lectus sem, molestie et, commodo at, placerat ut, nisl. Cras pulvinar leo posuere felis. Praesent tincidunt enim eget erat. In a leo vitae purus imperdiet consequat. Mauris elit ligula, mattis sodales, consectetuer at, accumsan a, nunc. Fusce tristique diam a odio. </p>

<p>
Aenean fermentum. Suspendisse commodo felis eget sem. Nunc elit. In sit amet quam quis massa fringilla semper. Duis ullamcorper tincidunt tellus. Nam sed ante sed eros gravida imperdiet. Pellentesque pulvinar ultrices ante. Donec adipiscing adipiscing quam. Nulla ac tortor quis elit tincidunt malesuada. In egestas est vel nunc. Donec auctor facilisis neque. Curabitur nec diam at eros gravida tempus. Phasellus tincidunt risus. Phasellus in sem a tellus dictum vulputate. Phasellus nunc. Integer pharetra. Maecenas ornare enim eu odio. Suspendisse consequat blandit tellus. Curabitur est ante, luctus id, tempor non, rhoncus ac, ipsum. </p></div>
</body>
</html>

FF: It works perfectly fine
IE: The fixed position was hard, but I got it.

It jerks though, it will be just fine

.
Here's an example of the menu full page(It's almost valid

): http://niler.net/examples/menuFixed.html

**k12onos** · 07-04-2008, 02:47 AM

the change between the first code and the second code was only this right?

Code:

<!--[if IE]>
<style type="text/css">
#navigation {
padding-top: 10px;
position:absolute;
left: 0px;
top:expression(body.scrollTop+"px");
}
#content {
padding-left: 200px;
}
</style>
<![endif]-->

so could i just change the <!--[if IE]> code to make it compatible with IE ?

anyway here is the test page:

the one that i say that the css messed up :

Code:

http://www.rumahblogger.com/folder/this.htm

the page was generated from my live website , saved to my computer, and then i added the navbar code, but when i upload the image wont show up, so if you want to see it complete with the image you can download the page here :

Code:

http://www.rumahblogger.com/folder/this.rar

(sorry for the trouble)

and the navbar should be like this if its not messed up with any css :

Code:

http://www.rumahblogger.com/folder/like_this.html

can you tell me how to solve this please?

thanks in advance

**Nile** · 07-04-2008, 03:30 AM

I don't see the differences.

the change between the first code and the second code was only this right?

Code:

<!--[if IE]>
<style type="text/css">
#navigation {
padding-top: 10px;
position:absolute;
left: 0px;
top:expression(body.scrollTop+"px");
}
#content {
padding-left: 200px;
}
</style>
<![endif]-->

And the divs at the bottom.
I've made it compatible with IE already, witch is why I have the ifs.
I hope you understand it more now.
Nile

**k12onos** · 07-04-2008, 03:47 AM

can you take a look at the .rar file? when you open the page there the navbar will look okay but behind the links there are some kind of background, and the navbar title were not in the right place,

you can see what i mean in this screenshot :

could you tell me how to make it the same like in here :

Code:

http://www.rumahblogger.com/folder/like_this.html

thanks again nile you have helped me a lot

**Nile** · 07-04-2008, 04:08 AM

Can you please use zip? I don't use rar.
And what browser are you using?

**k12onos** · 07-04-2008, 04:14 AM

sure, here it is :

Code:

http://www.rumahblogger.com/folder/this.zip

the screenshot was taken when im using firefox, but in firefox and IE they showed the same thing..

**Nile** · 07-04-2008, 12:46 PM

There's nothing in the zip...
But to fix this, find:

Code:

#navigation a:link, a:visited {
display: block;
font-size: 70%;
text-decoration: none;
color: #000;
}

And change it to:

Code:

#navigation a:link, a:visited {
display: block;
font-size: 70%;
text-decoration: none;
color: #000;
background-color: transparent;
}

**molendijk** · 07-04-2008, 01:42 PM

Originally Posted by Nile

IE: The fixed position was hard, but I got it.

It jerks though, it will be just fine

.

Use body{background: url(foo) fixed} to get rid of the jerkyness.
===
Arie Molendijk.

**Nile** · 07-04-2008, 02:13 PM

It doesn't really matter.

Thread: Navigation Bar with scrollbar, difficult to explain

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions