Menu bars and position fixed

[Eric Pinnell]

I've created a new menu bar navigation scheme for my web site,
www.ericpinnell.com but I've got a couple of problems.
First, I don't seem to find a way to get rid of the indenting
before the bullets.
Second, in using a <div> with <span> to change styles for the
headers, it seems to have killed the position:fixed of the entire
paragraph.
I defined the men bar as a fixed position paragraph and used <span>
to change the font size, background color, etc of the headers above
the bullets.
This produces some extremely weird effects on other browsers. So,
what the heck am I doing wrong? Is there an easier way for me to
change styles within a fixed position element?


Eric Pinnell

(Author, "Claws of The Dragon", "The Omega File")

For a preview, see: http://www.ericpinnell.com and click on "books"

 

[Kris]

I've created a new menu bar navigation scheme for my web site,
www.ericpinnell.com but I've got a couple of problems.
First, I don't seem to find a way to get rid of the indenting
before the bullets.

CSS:
ul, li { margin-left: 0; paddng-left: 0; }

Second, in using a <div> with <span> to change styles for the
headers, it seems to have killed the position:fixed of the entire
paragraph.

Use real headers. H1, H2, H3, etcetera. What is the purpose of the
position attribute in this situation anyway? Why not leave it out?

I defined the men bar as a fixed position paragraph

Doesn't look like one to me.

and used <span>
to change the font size, background color, etc of the headers above
the bullets.

Use real headers.

This produces some extremely weird effects on other browsers. So,
what the heck am I doing wrong? Is there an easier way for me to
change styles within a fixed position element?

<div id="menu">
<h2>Things I eat</h2>
<ul>
<li><a href="foo.html">Cheese</a></li>
<li><a href="foo.html">Bread</a></li>
<li><a href="foo.html">Meat</a></li>
</ul>
<h2>Things I hate about Usenet</h2>
<ul>
<li><a href="foo.html">Topposters</a></li>
<li><a href="foo.html">Bad quoting</a></li>
<li><a href="foo.html">Flamewars</a></li>
</ul>
</div>

#menu {
position: fixed;
top: 0; left: 0;
width: 25%;
}

#menu h2 {
color: white;
background-color: blue;
}

#menu ul, #menu li {
margin-left: 0;
padding-left: 0;
}