Have you checked the actual HTML generated?
Then the CSS applied to it?
Paulo Santos
2010-01-20 13:56:29
A:
HTML is a simple HTML but I am not following why it is right aligning.
RPK
2010-01-20 13:57:14
+1
A:
From the screenshot I would say that the items are not center-aligned, but rather offset from the left.
Try decreasing the margin-left/padding-left for your #ulCategoryMenu. As a quick example, try:
<ul id="ulCategoryMenu" name="ulCategoryMenu" style="margin-left:0;padding-left:0">
You might also have to decrease the left padding for your lis, depending on what CSS rules have been previously applied to them.
See also Listamatic for further inspiration.
RegDwight
2010-01-20 13:57:37
I just removed the ul and li. Now I am showing the labels in a div. It appears well aligned but the colors and spacing between each item?
RPK
2010-01-20 14:15:23
Frankly, I think you should keep your markup semantic. If you have an actual list, you shouldn't use div instead of ul. Besides, it's much easier to add the spacing between items if they *are* actual items (i.e., li tags).
RegDwight
2010-01-20 14:20:16
Hey, dont remove the ul and li, you wanna have a list dont you? :) try my example below, with the original HTML
littlegreen
2010-01-20 14:21:02
+1
A:
Set margin to 0, a little padding-left and a line-height (maybe 20px) to your li elements. By default, li have a margin-left/padding-left (depending on the navigator).
(The line-height if for the li to be more separated from each other. A padding-top and bottom can also works.)
Pikrass
2010-01-20 13:58:03
Actually, he has to set the bottom and top margins to about 2px, a little padding-left, optionally a lineheight, and the right background colour on the LI items. I've worked out the code below.
littlegreen
2010-01-20 14:51:42
+1
A:
Try this out and see if it works for you:
<div id="divCategoryMenu" name="divCategoryMenu" style="background-color:#BCD2E6;">
<ul id="ulCategoryMenu" name="ulCategoryMenu" style="list-style:none;padding-left:-2px;margin-left-2px;">
<li>Zilla Parishad</li>
<li>Nagar Parishad</li>
<li>Taluka Panchayat</li>
<li>Gram Panchayat</li>
</ul>
</div>
If your <li> elements are instead <label> elements, make sure they're properly wrapped in <li> tags.
Edit: of course, once you get the style worked out properly, you should move the styles to your stylesheet.
The above code should give you a list, with no bullets, and pull the list slightly to the left.
Jim Schubert
2010-01-20 14:05:02
+1
A:
It is recommended to assign the padding and margin for lists and list-items. The reason for this is twofold: 1, there are default settings for margin and padding that are typically undesired for navigable lists. 2, Firefox and IE handle their spacing differently, i.e., Firefox with use padding, IE margin (or vice versa, can't remember), and thus they both must be overridden in order for the final product to look the same in both browsers.
Additionally, the contents of an ol or ul must be li. If you have other elements, they must be wrapped in an li element.
neatlysliced
2010-01-20 14:08:03