reduce gap between bullet and text

dev_intagleo
dev_intagleo used Ask the Experts™
on
I have a simple structure like
<style>
li{ margin-left: -0.4em }

</style>
<table>
<tr><td>
<ul >
    <li ><span>Some text</span></li>
</ul>
</td></tr>
<table>

Open in new window


and i want to reduce/control the spacing b/w bullet and text
I cant use the bullet image solution as suggested on stackoverflow or on google searches
+ span solution is not working
as my table width is fixed and as my text increases and moves down the line due to table fixed width it is not aligned with the upper line text and slighly moves right

So how can i fix that?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
Please refer image attached
untitled.JPG
use
    td {
        line-height:<value>;
    }

Commented:
Try:

ul {text-indent: -1em;}

Open in new window

Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

You want to reduce the space between the bullet and text yes?

As you have the span wrapping the text on the list item just add a negative margin to it.

<style>
li{ margin-left: -0.4em }
span{margin-left: -10px}

</style>
<table>
<tr><td>
<ul >
    <li ><span>Some text</span></li>
</ul>
</td></tr>
<table>

Open in new window


Josh

EDIT: Stingray's method is neater and beats mine

Author

Commented:
@Anuroopsundd:
i tried line height but it has no effect, below is my  modified code
<td class="rightNav handCursor" style="line-height: 17px;">
<ul>
    <li> <span style="margin-left: -0.4em;"> Some text Some text Some text Some text </span> </li>
</ul>
</td>

Open in new window


@StingRaY:

i tried text-indent but it only works for FF, on IE its does not have any effect.

Author

Commented:
also note that

<table width="180" cellspacing="0" cellpadding="0" border="0">
<tbody>

Open in new window


is there above the <td>

Author

Commented:
@Josh:

Your solution is right, i have already do that but the problem is style="width:abc;" on the table and the increase in text inside span

You can see the below complete code and problem in it

<html>
<head>

<style>
	li{ margin-left: -0.4em }
	span{margin-left: -10px}
</style>

</head>

<body>
<table style="width:150px;">
<tr><td>
<ul >
    <li ><span>Some text Some text Some text Some text Some text</span></li>
</ul>
</td></tr>
<table>
</body>                                           

</html>

Open in new window

Ah ok, not a problem, try amending the line to this:
span{margin-left: -10px;display:block}

Open in new window


Josh

Author

Commented:
Thanx alot :)

Author

Commented:
Great

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial