<ul> and <li> Spacing 3

[k4ghg]

I have created an eBay template and am having a problem formatting my list items. When I use simple code that does not CSS validate works, for example:

CODE:
<b><u>Title:</b></u> < br />
<li>one
<li>two
<li>three

RESULTS:
Title
one
two
three

But when I used CSS code that can be validated, the list items are indented, there is a space between the Title and the first item, and each item has a space. Since this is ebay I can only use inline CSS and it cannot impact the whole page. Also, I think that my <ul> and <li> tags may be inheriting some of the general page layout. I have tried using Div's and <span> without too much success. Below is my code and any help and suggestions would be appreciate.

CODE:
<b><u>Title:</b></u>
<ul style="margin=0;padding=0;">
<li>one
<li>two
<li>three
</ul>

RESULTS:
Title

. one

. two

. three

Thank You... Ronnie

 

[Qik3Coder]

What do you want it to look like?
You have listed code, and current behavior, but not desired.

Lodlaiden

You've got questions and source code. We want both!
There's a whole lot of Irish in that one.

 

[k4ghg]

Thanks for looking at my question. I want the results similar to the first listing, but with correct (i.e., validated) CSS. Here are the desired results ((i.e., no line space or indentation, with the text wrapped around the first word).:

Title
. one
. two
. three

Thanks again...

 

[Qik3Coder]

Bullets with no indent:

it was freaking out with the /b /u tags being flipped. They have to be nested correctly.
In addition, CSS is very sensitive, no equals sign.

margin=0; should be margin: 0px;

The UL is what handles the tabbing and the spacing.

<span style="font-weight: bold; text-decoration: underline">Title:</span>
<li>one</li>
<li>two</li>
<li>three</li>

Lodlaiden

You've got questions and source code. We want both!
There's a whole lot of Irish in that one.

 

[spamjim]

I don't see where you are overriding anything in the LIs. You only seem to be overriding the UL.

What is eBay's CSS for LI that is being inherited by your HTML?

 

[Qik3Coder]

Not overriding anything. I REMOVED the UL, which is what causes the block tabbing.

If your LI's look "weird" then I need a sample of what they look like, so I can help you "de-style" them.

You've got questions and source code. We want both!
There's a whole lot of Irish in that one.

 

[vacunita]

Since this is no where near being valid code I cans ee how you would ahve problems.

[b][COLOR=#0000FF]<b><u>[/color][/b]Title:[b][COLOR=#0000FF]</b></u>[/color][/b] 
[b][COLOR=#0000FF]<ul[/color][/b] [COLOR=#009900]style[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"margin=0;padding=0;"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<li>[/color][/b]one
[b][COLOR=#0000FF]<li>[/color][/b]two
[b][COLOR=#0000FF]<li>[/color][/b]three
[b][COLOR=#0000FF]</ul>[/color][/b]

First of all, yes the tags need to be correctly nested. You can't close a tag before closing the one inside it. As you pointed out no equals signs in styles.
li tags should be closed also. And cannot exist without a UL tag.

[b][COLOR=#0000FF]<span[/color][/b] [COLOR=#009900]style[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"font-weight: bold; text-decoration: underline"[/color][b][COLOR=#0000FF]>[/color][/b]Title:[b][COLOR=#0000FF]</span>[/color][/b]
[b][COLOR=#0000FF]<ul[/color][/b] [COLOR=#009900]style[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"padding:0px; margin:0px;"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<li>[/color][/b]one[b][COLOR=#0000FF]</li>[/color][/b]
[b][COLOR=#0000FF]<li>[/color][/b]two[b][COLOR=#0000FF]</li>[/color][/b]
[b][COLOR=#0000FF]<li>[/color][/b]three[b][COLOR=#0000FF]</li>[/color][/b] 
[b][COLOR=#0000FF]</ul>[/color][/b]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Qik3Coder]

vacunita,
Attempting to affect the margin removes the bullets.

You've got questions and source code. We want both!
There's a whole lot of Irish in that one.

 

[vacunita]

Attempting to affect the margin removes the bullets.

Not quite. The bullets are still there, just that they are pushed out of view if the UL list is at the edge of the browser window or inside a container with no padding and margin, and overflow set to hidden.

The UL's have a property named list-style-position. This determines how the bullets are rendered. either inside or outside (the default is outside) of the li list element boundaries. If there is no padding and no margin, the list items start at the very edge of the UL box. So the bullets are pushed outside the UL. If the UL itself has no margins and no padding then there's no place for the bullets to go, so they move outside the boundaries of the container/page.

If you want to see the bullets with no margin or padding for the UL and LI, simply set the list-style-position property of the UL to "inside".



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[k4ghg]

Thanks for your help and sorry for the nesting confusion I simply transposed tags when I wrote the question(it appeared correctly in the code). I tweaked the suggestions and solved the the problems with the following code:

<span style="font-weight: bold; text-decoration: underline">Title:</span>
<ul style="padding:0; margin:0 0 0 1em;list-style-positionutside;">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

Thanks again for your help... Ronnie