SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Woes, Lists!!

    I am having a problem with the following CSS, I am hoping someone can pinpoint my error(s).

    Code:
     
    ul {
     font-family: Arial, Helvetica, sans-serif;
     font : bold 11px/1em;
     list-style-image : url(../images/bullet_nav.gif);
     margin-left: 0;
     margin-top: 3;
     padding-left: .5em;
    }
    li.LSTleftnav a:link{
     margin-top: 10px;
     list-style-image : url(../images/bullet_nav.gif);
     padding-left : 0px;
    }
    li.LSTleftnav a:hover{
     margin-top: 10px;
     list-style-image : url(../images/bullet_nav_o.gif);
    }
    Here is my html utilizing that CSS, it renders OK in IE 6 but is not rendering well at all in Netscape

    Code:
    <ul>
     <li class="LSTleftnav">
      <a href="#">Here is a link how well will this work?</a>
     </li>
     <li class="LSTleftnav">
      <a href="#">Here is a link how well will this work?</a>
     </li>
    </ul>
    Any ideas? Thanks
    Feel free to e-mail me any questions, jobs rants, whatever...

  2. #2
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I read in an article somewhere that one should set padding and margin the same on <li> elements. Something to do with how one browser puts the bullets in the margin and another browser puts them inside the box...

    Let me see if I can find the article...



    Rik
    Last edited by Zoef; Mar 24, 2003 at 15:13.
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Actually zoef, that's for the <ul> tag. Margin is used by IE and Opera to indent, while Padding is used in Gecko-based browsers. I have no clue which one is implemented in Safari/Konqueror though; your safest bet is to override both presets, i.e. :
    Code:
    ul {
    /*This will override all browsers and make
    them all render the same margin/padding */
    margin: 20px;
    padding: 0px;
    }

  4. #4
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Can you show it rendering?
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by nollieflip
    I am having a problem with the following CSS, I am hoping someone can pinpoint my error(s).

    Code:
     
    ul {
    font-family: Arial, Helvetica, sans-serif;
    font : bold 11px/1em;
    list-style-image : url(../images/bullet_nav.gif);
    margin-left: 0;
    margin-top: 3;
    padding-left: .5em;
    }
    li.LSTleftnav a:link{
    margin-top: 10px;
    list-style-image : url(../images/bullet_nav.gif);
    padding-left : 0px;
    }
    li.LSTleftnav a:hover{
    margin-top: 10px;
    list-style-image : url(../images/bullet_nav_o.gif);
    }
    Here is my html utilizing that CSS, it renders OK in IE 6 but is not rendering well at all in Netscape

    Code:
    <ul>
    <li class="LSTleftnav">
    <a href="#">Here is a link how well will this work?</a>
    </li>
    <li class="LSTleftnav">
    <a href="#">Here is a link how well will this work?</a>
    </li>
    </ul>
    Any ideas? Thanks
    In the first code block you have "margin-top: 3;" without specifying a unit of measure (px, pt, em, what?). I've highlighted it in the quote. I'm sure any browser with stricter rules than IE (which in reality is most of them) would be choking on that line.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    In the first code block you have "margin-top: 3;" without specifying a unit of measure (px, pt, em, what?). I've highlighted it in the quote. I'm sure any browser with stricter rules than IE (which in reality is most of them) would be choking on that line.
    Thanks for all the help so far. This issue is just horrible!! Here is where I am at right now.

    The tables have turned, Netscape renders wonderfully correct now and IE is the bad stepchild. I think all of my CSS code is correct, it's just random buginess of IE. I am experiencing "disappearing" bullet items and other random oddities. Hit refresh once in IE and EVERYTHING will look great, minimize the window and maximize it and bullets will go missing.

    I did away with trying to do some hover tricks as that just made things worse. Here is my current code. Also please visit this link I found that details some of the same types of CSS oddities. Somehow the folks at sitepoint seem to have it working quite nicely on their homepage, but then again they use div tags while i'm stuck in tables.

    http://tom.me.uk/2002/2/ie6css.html

    Code:
     ul {
     margin-top: 8px;
     margin-left: 5px;
     padding-left: 5px;
    }
    li.LSTleftnav a:link {
     font : bold 11px/.5em Arial, Helvetica, sans-serif;
     color : #3366ff;
     list-style-type : none;
     background-color : transparent;
    }
    li.LSTleftnav a:visited {
     font : bold 11px/.5em Arial, Helvetica, sans-serif;
     color : #3366ff;
     list-style-type : none;
     background-color : transparent;
    }
    
    li {
     list-style-image : url(../images/bullet_nav.gif);
     list-style-type : none;
     background-color : transparent;
     margin-top: 10px;
    }
    Feel free to e-mail me any questions, jobs rants, whatever...


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
  •