Why does Netscape mess up my lists?

[Marina]

I’m trying to create a list that looks like this:

a. Some text.
b. Some text.
c. Some text.

It looks fine in IE but Netscape 4.7 displays bullets instead of letters. According to my HTML 4 Bible book Netscape should support all list properties. So why doesn't this work?

This is my code:

<ul class="abcclass">
<li> Some text. </li><br>
<li> Some text. </li><br>
<li> Some text. </li><br>
</ul>

.abcclass { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; list-style-position: outside; list-style-image: none; list-style-type: lower-alpha}

[Aes]

Well first of all you have the list type specified as an unordered list. So Netscape is doing it properly. You need to use an ordered list. So instead use this:

<ol type="a" class="abcclass">
<li />Some Text.
<li />Some Text.
<li />Some Text.
</ol>

I suppose the <br>'s are in there because you want them to be, but they're not needed -- but if you want them use them!



However, if you are going to use them, use <br /> instead though. Same reason why I used <li /> instead of a closing </li> tag.

Also you need to tell the browser what to use (i.e. numbers or letters), which is specified by the type="a". I'm not sure, but since you specify it in the style then you may not need this part. The main problem seemed to lie with the unordered list type.

Have fun!

[qslack]

Originally posted by Aes

<ol type="a" class="abcclass">
<li />Some Text.
<li />Some Text.
<li />Some Text.
</ol>

Wouldn't the browser interpret that as:

<ol type="a" class="abcclass">
<li></li>Some Text.
<li></li>Some Text.
<li></li>Some Text.
</ol>

[/code]

[Marina]

Thanks Aes! I tried this:

<ol type="a" class="abcclass">
<li />Some Text.
<li />Some Text.
<li />Some Text.
</ol>

Now Netscape is displaying the list as:

1. Some text.
2. Some text.
3. Some text.

...which, of course, is better than the squares, but I would still prefer the letters.
If I remove the class="abcclass" Netscape displays the list correctly, but I need to format the text somehow. How can I do that?

[htmlite]

I believe the <li /> is going for the XHTML solution. I think that the LI should have the closing tag proper instead of being a single closed tag as suggested by qslack.

So for the regular HTML versions, I think the answer would be...

<ol class="abcclass">
<li>Some Text.</li>
<li>Some Text.</li>
<li>Some Text.</li>
</ol>

The "type" should be taken care of by the CSS declaration... list-style-type: lower-alpha. Perhaps note up the CSS like so...

.abcclass {font: 12px "verdana", "arial", "helvetica", "sans-serif"; 
padding: 5px;
list-style-position: outside;
list-style-type: lower-alpha;}

Netscape can be picky with CSS at times, so that still may not get it...

That's my guess at it

[Aes]

What version of Netscape are you using? My solution seemed to work in Netscape 4.7x as well as all versions of Internet Explorer. Mozilla/Netscape 6.x gave me some problems though.

I don't believe using <li />Some Text would be the same as <li>Some Text</li>. I was under the impression that the list lines were sovereign tags....

But crap, Mozilla/NS6.x seems to think that it should be the <li></li> way, and that way seems to work in all browsers.

Netscape 4.7x simply does not work with CSS well at all. I'm sorry Marina. You know, W3C's organization of their site sucks -- I can never find what I'm looking for when I'm there.

[Marina]

I have tried all your suggestions and I think that Aes is right. Netscape doesn't like CSS. I just can't make this code work... Oh well, it's good to know that most people use IE. Thanks for your help, guys!

[isotope235]

Marina,

NN4 is choking on the padding properties. Try removing:

padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;

from your stylesheet.

Also, adding padding to the <ol> will apply padding to the "box" around the <ol> and not to the individual <li>'s. Is that what you're trying to do?

For xhtml compliance, use <li></li>. < /> is only used for the empty elements <br />, <hr /> & <img />.

[Marina]

Thanks isotope! I removed the padding and now everything looks like it should. I needed the padding because I didn't want the text to come too close to the cell border, but now I just added another column and it looks fine.