SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Bulleted list using images - align problem

    I have problems with aligning the list that uses images as bullets.
    In Firefox everything works well, but in Opera and IE, the bullet images are moved up (see the screenshots).
    How can it be corrected? What's wrong with them?

    plus/minus list



    HTML:
    Code:
    <h2>Advantages:</h2>
    <ul class="pros">
       <li>number of the projects (over 100 posted daily!) and their variety.</li>
       <li>reasonable fees (5%, min. $5).</li>
       <li>interface and functions (invited only projects, featured, job listings).</li>
       <li>several withdrawal methods (cheque, Paypal, e-gold, wire transfer).</li>
       <li>quick withdrawals (up to a few days).</li>
       <li>own dedicated forum and support.</li>
    </ul>
    
    <h2>Disadvantages:</h2>
    <ul class="cons">
       <li>no obligatory deposit.</li>
       <li>occasional problems with support.</li>
    </ul>
    CSS:
    Code:
    .pros { list-style-image: url('../images/icons/plus.png');}
    .cons { list-style-image: url('../images/icons/minus.png');}
    blue arrow list



    HTML:
    Code:
    <ul class="arrow">
       <li><a href="#selectionofsites">Selection of the freelance market sites</a></li>
       <li><a href="#registration">Registering and passwords</a></li>
       <li><a href="#projects">Projects</a></li>
       <li><a href="#communication">Communication with a client</a></li>
       <li><a href="#language">Language</a></li>
       <li><a href="#reviews">Reviews</a></li>
       <li><a href="#competition">Competition</a></li>
       <li><a href="#mockup">Mockup</a></li>
       <li><a href="#deadlines">Deadlines</a></li>
       <li><a href="#prices">Prices and payments</a></li>
       <li><a href="#transfers">Money transfer and withdrawal</a></li>
       <li><a href="#rules">Admins and Rules</a></li>
       <li><a href="#dangers">Dangers</a></li>
    </ul>
    CSS:
    Code:
    ul.arrow
    {
      list-style-image: url('../images/icons/arrow.png');
    }
    
    ul.arrow li a
    {
      color: #0061A6;
      font-weight: bold;
      font-size: 14px;
      line-height: 18px;
      text-decoration: none;
    }
    
    ul.arrow li a:hover
    {
      color: #1480cc
    }
    
    h2.arrow a
    {
      padding: 0 0 0 15px;
      background: transparent url('../images/icons/arrow.png') no-repeat center left;
    }
    Thank you.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  2. #2
    SitePoint Guru rockit's Avatar
    Join Date
    Sep 2005
    Location
    Canada
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i always find the area of css a bit quarky depending on browser. where i always start is setting margins and padding to 0 to look and see if i can achieve a common look. then, i begin to move on setting properties.

  3. #3
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Hey Arthur,
    Try this:
    Code:
     {
       color: #0061A6;
       font-weight: bold;
    font : 14px/18px font1, font2, font3, font4;
       text-decoration: none;
     }
    instead of this
    Code:
    {
      color: #0061A6;
      font-weight: bold;
      font-size: 14px;
      line-height: 18px;
      text-decoration: none;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Arthur,

    I'm afraid the list image is inconsistently positioned between browsers and if you want pixel perfect accuracy you should simply use a background image on the list and add some left padding to keep the text clear.

    The positioning will then be more or less exact between browsers and is the way I always do this. I know its not as semantic but its the only way if you want things exact.

  5. #5
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Oh, OK.

    I think I'll have to live with this small mispositioning then

    Thank You
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing


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
  •