asked on

reduce gap between bullet and text

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?

dev_intagleo

ASKER

Please refer image attached
untitled.JPG

Anuroopsundd

use
td {
line-height:<value>;
}

StingRaY

Try:

ul {text-indent: -1em;}

Open in new window

joshfraser

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

dev_intagleo

ASKER

@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.

dev_intagleo

ASKER

also note that

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

Open in new window

is there above the <td>

dev_intagleo

ASKER

@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

ASKER CERTIFIED SOLUTION

joshfraser

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dev_intagleo

ASKER

Thanx alot :)

dev_intagleo

ASKER

Great