Space being added after custom bullet points in Chrome & Firefox

HTML & CSS
1

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


<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>
2

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 [URL=“http://search.sitepoint.com/”]Advanced Search.

3

Hi Charlotte8. Welcome to the forums. :slight_smile:

As DT said, that’s not great code. :frowning: 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.


<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>


ul {
  list-style: none; 
  margin: 0;
  padding: 0;
}

li {
  padding-left: 30px;
  background: url(bullet.jpg) no-repeat 0 50%;
}