Bullets line up

Topic

New Reply

Hi,

For some reason, my seond line of bullets doesn’t line up, please see below:

• Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test
• Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test

How can I modify my codes to show as the follow:

• Test Test Test Test Test Test Test
Test Test Test Teset Test Test Test
• Test Test Test Test Test Test Test
Test Test Test Test Test Test Test

I am using the css style and below is the line codes:

.nav ul {
text-align:left;
list-style-type:none;
display:block;
margin:10px;
padding:0;
}

Thanks in advance

Regards

Reply | Quote

Replies

I’m not sure whether your post really reflects what you meant. Can you post the HTML of your unordered list or use

markup around your illustration to make it line up (right now the two examples look roughly the same to me)?

Reply | Quote

Below is my html codes of unordered list:

 

[*]
I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem.
[*]
I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem.
[*]
I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem.
[*]
I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem.
[*]
I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem.
[*]
I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem.

 

Thanks

Reply | Quote

If you want a real unordered list, you should place a

tag before the first [*] and a [/list] tag after the last .

Note: you have switched the last and .

Reply | Quote

Thanks, Hans.

After I add those two

tags and the bullter is disappeared. Please see codes below:

[*]
I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem.
[*]
I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem.
[*]
I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem.
[*]
I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem.
[*]
I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem.
[*]
I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem. I have problem.

I would like to keep bullets, but the second line of each bullet I would like to line up with text, not bullet. Sorry for unclear info.

Thanks

Reply | Quote

If I paste your HTML into a text file (with before it and after it, I get what is shown in the screenshot below.

Reply | Quote

Thanks, Hans.

Do you think there’s something to do with css. I am using the css style and below is the line style codes:

.nav ul {
text-align:left;
list-style-type:none;
display:block;
margin:10px;
padding:0;
}

Thanks

Reply | Quote

The line

list-style-type:none;

specifies that you don’t want bullets. You can either omit this line or change it to

list-style-type:disc;

Reply | Quote

I either change to list-style-type:disc; or omit this line. The whole pages lose the format, it seems like ccs doesn’t apply to the web pages.

Any idea?

Reply | Quote

Sorry, I’ll have to leave this to other Loungers who know more about CSS.

Reply | Quote

Can you paste all of the css, and all of the html into a text file and attach them?

Your css for

looks like it is intended to provide a list style menu, but because it starts with

.nav ul {

it should only apply to lists within a

that has the class nav.

If your list is within such a Div move the end of the Div to before the start of the list.

Reply | Quote

Hi Gary

The problem that you are facing at the moment is that you appear to be over complicating the HTML . Hopefully I have simplified it for you by removing the unwanted Font tags which can be easily placed in the CSS style like follows:

.nav ul {
	text-align:left;
	list-style-type:circle;
	display:block;
	margin:10px;
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;

}

I have also ensured that I used a font family for citizens who may not have one or more of the fonts installed on their client PC.

There was also a problem with the fact that the UL tag was not closed propoerly and be it that you are a IE7 user it may not have as forgiving as older version of IE were. Finally, as other have mentioned, your code snippet did not have the UL tags nesting within a DIV tag.

I have attached the file with my modifications

Reply | Quote

Thanks for all of your help. Here is my situation now: After I insert

and then the bullets lines up. However, the bullets disappeared as soon as I put css file. I have attached both my css & html codes.

Thanks again for all of your help.

Regards

Reply | Quote

Your CSS file has an explicit instruction to NOT display the bullets. The attached page illustrates a list with a default list style and your list styles.

Reply | Quote

Thank you so much, jscher2000.

I don’t why after I modified the codes and retry it with CSS and html, I still can’t see the bullets. Do you mind to take a look again on the attached my style & html file?

Thank you so much for your help.

Reply | Quote

The CSS file has explicit directions to omit the bullets. If you read this thread, you will see that repeated over and over. It is the “list-style” and “list-style-type” property that is set to show no bullets. Please do a text search in your CSS file to find that rule and edit it to your liking as described in earlier posts.

In my view, CSS should not be treated as a black box. If you do not have time to study what the CSS rules do now, when you are building the site and have the best chance to tailor it exactly to your needs, then it’s only going to get more difficult to maintain in the future.

Reply | Quote

Thanks

Reply | Quote