Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5209
  • Last Modified:

<ul> padding

I have this simple html for list

<ul style="list-style:square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

When it displayed on HTML page, it have a lot of space/padding on left side and big squares. i want to minimize left space/padding make the squares small. how can i do that (both for IE and FireFox)?

You can view http://www.alibaba.com/ under "Welcome to Alibaba.com" heading on right side of the page, it has very less space on left and small squares.
0
php_beginner
Asked:
php_beginner
  • 3
  • 3
1 Solution
 
KennyTMCommented:
Reduce the "margin-left" of the <li>.

e.g.

<ul class="square_ul">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Coffee for Comparison</li>
<li>Tea for Comparison</li>
<li>Coca Cola for Comparison</li>
</ul>

<style>
.square_ul { list-style: square; }
.square_ul li {margin-left: -1em;}
</style>
0
 
KennyTMCommented:
And, as for the size of the square, it can't be changed, AFAIK.
In fact the site you refered uses an image for the bullets, as I can see in the stylesheet (http://img.alibaba.com/css/3v/common.css?t=060403.css ):

ul {list-style-image: url(http://img.alibaba.com/images/eng/style/css_images/ul_content.gif);}
ul ul{list-style-image: url(http://img.alibaba.com/images/eng/style/css_images/ulul.gif);}
ul ul ul{list-style-image: url(http://img.alibaba.com/images/eng/style/css_images/ulul_c.gif);}

0
 
php_beginnerAuthor Commented:
Thanx for the quick reply.

By the way what is 'ul ul ul' in the above code you provided?

I have set the image for ul, it has space between image and text but doesnt show space for this image http://img.alibaba.com/images/eng/style/css_images/ulul.gif. can i reduce that?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
php_beginnerAuthor Commented:
Now i have decided to use image similar to http://img.alibaba.com/images/eng/style/css_images/ulul.gif
It is fine in IE, but in FireFox image is bottom aligned:-s
0
 
KennyTMCommented:
"ul ul ul" means a <ul> nested inside a <ul> nested inside a <ul>. Basically it matches the third <ul> in <ul> <li> <ul> <li> <ul> <!-- etc. -->

You can "fix" the alignment with two methods.

1) Change the height of the image with an image editor so that it has the same height as the text, or

2) Use a background image instead of list-style-image:

<style>
.square_ul {
      list-style: none;
}
.square_ul li {
      background-image: url(http://img.alibaba.com/images/eng/style/css_images/ulul.gif);
      background-position: left 40%;
      background-repeat: no-repeat;
      padding-left: 20px;
      margin-left: -20px;
}
</style>

The 20px of padding-left defines how close the text and the bullets are (smaller -> closer).

I recommend the latter solution, because the former doesn't work nice when you want to change the font size.

Hope these help.
0
 
php_beginnerAuthor Commented:
Thanks a lot.

I used the last method.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now