I can't center the bullets of a list in Safari

Discussion in 'Web Design and Development' started by Coffee-Drinker, Nov 1, 2009.

  1. Coffee-Drinker macrumors newbie

    Coffee-Drinker

    Joined:
    Sep 10, 2009
    #1
    Hi, everyone,
    I am trying to center a bulleted list and a list with PNGs as bullets using XHTML 1.0 and CSS 2, everything coded by hand. In Firefox 3, IE 7 and Opera 9 they render fine. W3C says, all is correct. Still they don't center in Safari, well that is the list text centers fine, but the bullets / PNGs stay on the left. I already searched lots of forums, looked in selfhtml, and tried several things, I found on the WWW. So far I couldn't achieve any success. Could someone please help me on this matter? I put a link to the problematic sites below and added the corresponding Safari screenshot (sorry that I could not add both sides, but there is not enough space), xhtml and css files as pdf attachements.
    Many thanks for any help on this and best regards.

    Coffee-Drinker

    http://www.duofue.ch/de/repertoire.html
    http://www.duofue.ch/de/beispiele.html
     

    Attached Files:

  2. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #2
    Adding list-style-position: inside; to the .note li selector should fix the problem as the default value is outside. If that throws it off-center a bit you could also add a negative margin-left declaration.

    Code:
    .note li {
        list-style-image: url(pics/note.png);
        [B]list-style-position: inside;[/B]
        vertical-align: middle;
        padding-top: 10px;
        padding-left: 20px;
        [B]margin-left: -10px;[/B]
    }
    A bit of a hack, but........
     
  3. Coffee-Drinker thread starter macrumors newbie

    Coffee-Drinker

    Joined:
    Sep 10, 2009
    #3
    Dear nuxx,
    Thank you very much for your kind reply. I will try it and post the result.
    Thanks again.

    Coffee-Drinker
     
  4. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
  5. Coffee-Drinker thread starter macrumors newbie

    Coffee-Drinker

    Joined:
    Sep 10, 2009
    #5
    At last I could test your proposals. Adding "list-style-position: inside;" alone to the two classes did the trick. Thank you very much. Below is the CSS code with the important bits highlighted, just in case others experience the same issue.
    Code:
    .liste li {
    	margin-top: 20px;
    	margin-left: 240px;
    	line-height: 2em;
    	[B]list-style-position: inside;[/B]
    }
    
    .note li {
    	list-style-image: url(pics/note.png);
    	vertical-align: middle;
    	[B]list-style-position: inside;[/B]
    	padding-top: 10px;
    	padding-left: 20px;
    }
    
    Thanks again for your great help.

    Coffee-Drinker
     

Share This Page