Problem getting bullets for my list

[Dopple]

I am using the expandable nav menu as featured on A List Apart and it styles the unordered lists in a way that screws things up when you want to use them again (css code below). I have a class for my other lists called .all and they are displaying ok but for one problem. I cannot get the bullets to appear. Can anyone see from my code what the issue may be? The site can be viewed at www.hamishtaylor.com/whatis.php (http://www.hamishtaylor.com/whatis.php). Any help would be smashin'!
Thanks
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #000;
}

ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #fff;
background: #000;
padding: 15px 5px 15px 5px;
border: 1px solid #000;
border-bottom: 0;
}
ul li p {
display: block;
text-decoration: none;
color: #fff;
background: #000;
padding: 15px 5px 15px 5px;
border: 1px solid #000;
border-bottom: 0;
}


/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul {
display: block; }
ul.all {
width: 600px;
padding:10px 0 5px 100px;
list-style-type: disc;
list-style-position: inside;
border-bottom: 0;
font:12px arial, verdana, helvetica, sans-serif;
}
ul.all li {
width:600px;
list-style-type: disc;
list-style-position: inside;
}

[WebJoel]

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #000;
}

This means NO BULLETS. :)

[Dopple]

Yes.... but.... shouldn't that become void for <li class="all"> when I use the following? I'm using IE6 (Note: I didn't know wheather it would be ul or li that I used but before anyone mentions it, I did try each on their own.)
ul.all {
width: 600px;
padding:10px 0 5px 100px;
list-style-type: disc;
list-style-position: inside;
border-bottom: 0;
font:12px arial, verdana, helvetica, sans-serif;
}
ul.all li {
width:600px;
list-style-type: disc;
list-style-position: inside;
}

[WebJoel]

I think that I am not clear as to what you're after here... do you want all list-items to have disc-bullets, or just the ones with the class="all"?

There are a few 'warnings' on validation, notably, this:

<p>Hamish has seen first-hand the benefits of looking outside standard industry practices to improve performance;
<ul class="all">
<li>British Airways put beds in their planes with the help of a yacht designer</li>
<li>Airport queuing was improved with the help of Disney</li>
<li>Sainsburys Bank profits increased tenfold by using retail concepts not traditional bank approaches.</li>
</ul>
</p>

An unordered list forces an implicit close of the preceeding tag ("<p>"), so there should be a "< /p>" before opening the "<ul>". Perhaps, this is where the list-style-type:disc is not being obeyed?
I think that <ol> and <ul> do not require being inside paragraph tags(??). At any rate, HTML-Tidy throws warnings when it's done that way, and often enough a 'warning' is enough to create havoc with otherwise sound and workable code. :)

[Dopple]

Haha. Sorry you're right. I probably should have chose a better word for the class than "all" I want only the un-ordered lists with the calls of "all" to have bullets. I amended the code so that the paragraph clses befroe the list stats but it's still not displaying.

Also when I removed list-style:none; from ull in my css, they still didn't have bullets, even after refreshing! Now the plot thickens.

[Dopple]

*Bump*
Can anyone see what may be the problem here? It has me totally stumped.

[WebJoel]

Do you want the UL of "programme" to have discs? This is the navigation section, yes?
(edit)
nope, -found it. You want the discs in the content section.

[DaveSW]

they reappeared when I used the following:
ul.all {
width: 600px;
padding: 10px 0;
margin: 0px;
list-style: disc inside;
border-bottom: 0;
font:12px arial, verdana, helvetica, sans-serif;
}

[Dopple]

No the only one's to have discs are the list items within <ul class="all"></ul>. having used a tutorial for the nav section I had to create a second class for the rest of the ULs used so that the nav styling didn't affect them.
What I now have, after googling the problem and finding http://www.alistapart.com/articles/taminglists/ is as follows. (I even tried <ul class="all" style="list-style-type: disc;"> and this didn't work.)
ul.all {
width: 600px;
/*padding:10px 0 5px 100px;*/
padding-left: 1em;
margin-left: 1em;
list-style-type: disc;
border-bottom: 0;
font:12px arial, verdana, helvetica, sans-serif;
}
ul.all li {
width:600px;
padding: 0;
margin: 0;
}

[Dopple]

Dave which Browser are you using?

[Dopple]

It just seems to be Explorer which is beign a rogue. I did read a tutorial on IE doing this but after following it, It didn't seem to do anything. Anyone got any suggestions? Thanks for your help so far guys. It's much appreciated.

[DaveSW]

well using firefox I couldn't see your problem, so I switched to IE and played with the code and that worked.
I think the padding is the crucial bit, unless you've moved your list style outside elsewhere in the code.

Can you zip it up for us to work on?

[Dopple]

Here you go. I've only included the necessary files and this file is actually clients.php (actually .html in the zip file) rather than what-is.php. That's funny because I'm using IE6 and it's not working with the fix you gave. maybe if I try when I get home on IE7 then it will actaully work as planned. (my work doesn't let you update software.)
G

[WebJoel]

Well I'm stumped! :confused: I don't know what to do so I'll be following this thread so that *I* can learn how to do this too.

[Dopple]

I thought it may have been to do with the padding on the left so I added30px worth of padding-left to both the <ul> and the <li> but neither worked! This link kind of explains it. Like I said, I'll have to wait until I'm home and using IE7 to check this out. http://www.communitymx.com/content/article.cfm?page=2&cid=01DB3
Nightmare!!!

[DaveSW]

This line * html ul li { float: left; }
is causing your problems

Add float: none; to your ul.all li declaration.

Normally I would make the menu styles as the special ones and the others as the ordinary ones...

[WebJoel]

..... check this out. http://www.communitymx.com/content/article.cfm?page=2&cid=01DB3
Nightmare!!!
wow... yet another IE-flaw? I'd have lost a $5.oo bet on that! :cool:

[Dopple]

This line * html ul li { float: left; }
is causing your problems

Add float: none; to your ul.all li declaration.

Normally I would make the menu styles as the special ones and the others as the ordinary ones...
YES! Thank you so much. I did actually try to make the menu lists as the special ones but it really started screwing up once I tried.

WebJoel, now that this is resolved I don't know if maybe you can keep your 5 bucks after all? :)

[Dopple]

Now here's a problem...
... If I want to put the items into 2 columns then I have to use float:left attribute. Is there absolutely no way to display the bullets when using float:left?
Please see http://www.hamishtaylor.com/clients.php for info. (Note the problem only happens in Explorer that I know of) I checked on safari using http://www.danvine.com/icapture/ and the bullets appear using float:left.

[DaveSW]

can you put the lists into two divs and float the divs?

<div class="leftlist">
<ul>
<li>left list one</li>
<li>left list two</li>
<li>left list three</li>
</ul>
</div>

<div class="rightlist">
<ul>
<li>right list one</li>
<li>right list two</li>
<li>right list three</li>
</ul>
</div>

Alternatively you could use a css background to create a pretend bullet