SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Space being added after custom bullet points in Chrome & Firefox

    Hi,
    I have created a custom bullet point list. My custom images are showing and everything’s great. Only problem is Chrome and Firefox are adding a largish space between the bullet point and the text that it is accompanying.
    It is fine in internet explorer.

    Does anybody have any idea as to how I can fix this?

    Here is the code I am using (It is in a table btw).

    Any workarounds that rely on telling it how many pixels from the edge to position it won't work because my page changes width as the window gets resized. :S

    Any help would be greatly appreciated.
    Code HTML4Strict:
    <div align="center">
                                            <table border="0" width="80%" id="table2">
                                                <tr>
                                                    <td>
                                        <p align="left">
                                        <span style="text-decoration:underline; font-weight:700">
                                        <font size="5" face="Arial">Title</font></span></p>
                                        <ul>
                                            <li>
                                            <p class="MsoNormal" style="text-indent: -18.0pt; margin-left: 36.0pt" align="left">
                                            <span style="font-size:14.0pt;font-family:Arial">Text example 1</span></p></li>
                                            <li>
                                            <p class="MsoNormal" style="text-indent: -18.0pt; margin-left: 36.0pt" align="left">
                                            <span style="font-size:14.0pt;font-family:Arial">Text example 2</span></p>
                                            </li>
                                            <li>
                                            <p class="MsoNormal" style="text-indent: -18.0pt; margin-left: 36.0pt" align="left">
                                            <span style="font-size:14.0pt;font-family:Arial">Text example 3</span></p></li>
                                            <li>
                                            <p class="MsoNormal" style="text-indent: -18.0pt; margin-left: 36.0pt" align="left">
                                            <span style="font-size:14.0pt;font-family:Arial">Text example 4</b></span></p>
                                            </li>
                                            <li>
                                            <p class="MsoNormal" style="text-indent: -18.0pt; margin-left: 36.0pt" align="left">
                                            <span style="font-family: Arial; font-size: 14pt">Text example 5.</span></p></li>
                                        </ul>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
    Last edited by Dark Tranquility; Mar 25, 2013 at 17:48. Reason: Highlight

  2. #2
    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)
    Are you using MS word?
    You should never use any software to generate your code! You need to learn how to code by hand from scratch.
    The topic of styling lists with CSS has been covered in many other threads.

    Please Search using the vBulletin Advanced Search and SitePoint's Advanced Search.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi Charlotte8. Welcome to the forums.

    As DT said, that's not great code. But what you are trying to do it quite easy. The best thing to do is remove all margin and padding on the <ul> and add left padding the the <li>s, and then apply the images to the background of each <li>. E.g.

    HTML Code:
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
    Code:
    ul {
      list-style: none; 
      margin: 0;
      padding: 0;
    }
    
    li {
      padding-left: 30px;
      background: url(bullet.jpg) no-repeat 0 50%;
    }


Tags for this Thread

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
  •