SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Next stop: PHP! Marina's Avatar
    Join Date
    Apr 2001
    Location
    Sweden
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why does Netscape mess up my lists?

    Im 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}

  2. #2
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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!
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  3. #3
    SitePoint Wizard
    Join Date
    Jul 1999
    Location
    Chicago
    Posts
    2,629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Aes

    Code:
    <ol type="a" class="abcclass">
    <li />Some Text.
    <li />Some Text.
    <li />Some Text.
    </ol>
    Wouldn't the browser interpret that as:

    Code:
    <ol type="a" class="abcclass">
    <li></li>Some Text.
    <li></li>Some Text.
    <li></li>Some Text.
    </ol>
    [/code]

  4. #4
    Next stop: PHP! Marina's Avatar
    Join Date
    Apr 2001
    Location
    Sweden
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    SitePoint Addict
    Join Date
    Jul 2001
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

    Code:
    <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...

    Code:
    .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

  6. #6
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  7. #7
    Next stop: PHP! Marina's Avatar
    Join Date
    Apr 2001
    Location
    Sweden
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  8. #8
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Marina,

    NN4 is choking on the padding properties. Try removing:

    Code:
    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 />.

  9. #9
    Next stop: PHP! Marina's Avatar
    Join Date
    Apr 2001
    Location
    Sweden
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •