CSS bullets on lists

[blushifted]

I have a couple of questions about getting my style sheet to work for Firefox and IE. First off, my site url is <ooops> if seeing it helps. People say it is super boring and I am working on adding some javascript to make things move around a little, but I would always appreciate any feedback or disses you may have (be somewhat gentle, this is only my second site and my css has improved a little from the first one).

i have a horizontal navigation menu which is made up of a <ul> with <li> anchors to switch pages. The problem is that despite the fact that the list-style property is set to none there is a bullet showing.

#navigation
{
position: relative;
top: -42%;
margin-left: auto;
margin-right: auto;
float: left;
list-style: none;
}

#navigation li
{
float: right;
margin: 0 1px 0 0;
padding: 0;
font-family: "Berlin Sans FB Demi", Georgia;
font-size: 95%;
}

#navigation a
{
float: left;
display: block;
margin: 0;
padding: 4px 8px;
color: #000066;
text-decoration: none;
border: 1px solid #FFFFFF;
border-bottom: none;
background: #FFFFFF;
}

<div id="navigation">
<ul id="hnav">
<li id="n-login"><a href=""><font color="#990000"><b>login</b></font></a></li>
<li id="n-contactus"><a href="">contact us</a></li>
<li id="n-owners"><a href="">services</a></li>
<li id="n-home"><a href="/">home</a></li>
</ul>
</div>

My second question is regarding positioning. I tried to create a site that would be flexible in that if someone had vision problems that they could resize the font or content to see it better. As such I used a lot of relative positioning and the design breaks down when I added the relative positioning for the content to move it alongside the left vertical navigation menu. Is there a way to add different positioning values to make it align properly in IE? Or is there another of designing the layout that doesn't require positioning? The content which comprises the advertisement and the message should line up next to the left vertical navigation.

Any help or advice anyone could offer would be greatly appreciated.

#content
{
position: relative;
left: 33.3%;
top: -103.8%;
width:66.6%;
height: 100%;
border-left: thin solid #CCCCCC;
}

[note]added the HTML for the list[/note]

[edited by: SuzyUK at 11:31 am (utc) on May 13, 2008]
[edit reason] please no personal URI's, see charter thanks [/edit]

[Wolf_man]

in your CSS your telling the DIV "navigation" to have list-style:none, not the actual list "hnav";

so change your CSS to:

#navigation
{
position: relative;
top: -42%;
margin-left: auto;
margin-right: auto;
float: left;
}

#hnav{
list-style: none;
}

#hnav li
{
float: right;
margin: 0 1px 0 0;
padding: 0;
font-family: "Berlin Sans FB Demi", Georgia;
font-size: 95%;
}

#hnav li a
{
float: left;
display: block;
margin: 0;
padding: 4px 8px;
color: #000066;
text-decoration: none;
border: 1px solid #FFFFFF;
border-bottom: none;
background: #FFFFFF;
}

[doritoz]

One thing to consider: Most of the population doesn't have the font you're using. Berlin Sans FB Demi won't be visible on many user's browsers. If it's a vital font (say, for your logo), consider creating an image with alt text, or using the sIFR plugin. If you have Flash, it's pretty easy to setup.

[blushifted]

Thanks so much for your advice, it so much appreciated. I am new to computers and little setbacks are so discouraging and sometimes even fatal. Everything is nearly correct now so that it displays in both browsers relatively well but in IE the horizontal navigation and the positioning is still messed up. I have read a little bit about the double margins error in IE but that doesnt seem to be the problem. Do you happen to know of where I can find information about fixing this or was it bad design to design it this way? Thanks again for taking the time. Warmest Regards