<< JaybirdsWeb

Web Designer Tips - CSS

Tips for closing gap in Unordered Lists

Note: CSS list item experiments. Example #1, no matter how I tried, when using my own bullet image in the list, I could not successively accomplish the correct horizontal alignment. It looked good in Netscape 7.0 and mozilla but horrible in IE 6.0. So I resorted to using a list style square, and using an inline style to format the text color. Example #3 contains a bullet image. Example #2, the top text is lined up with list items, does not work in Netscape 4x, nor is it exact in Opera, both degrade gracefully! Opera does not like the shorthand version in CSS.

LIST EXAMPLE #1

  • List item 1
  • List item 2
  • List item 3
  • List item 4

CSS Code:
ul.one {margin-top:0px;
margin-bottom:0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
color:#6699CC;
list-style-type: square;
line-height: 1.5;
}

p.heading1 { margin-bottom:0px;
padding:0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
margin-left: 10px;
}

HTML Code:
<p class="heading1">LIST EXAMPLE #1</p>

<ul class="one">
<li><span style="color:#000000">List item 1</span></li>
<li><span style="color:#000000">List item 2</span></li>
<li><span style="color:#000000">List item 3</span></li>
<li><span style="color:#000000">List item 4</span></li>
</ul>


List Example #2

  • List Item 1
  • List Item 2
  • List Item 3

CSS Code:
ul.two {margin-top:0px;
margin-bottom:0px;
list-style: circle;
list-style-position: outside;
font-family:Verdana, Geneva, Arial, sans-serif;
font-size: 11px; }

p.heading2 {margin-bottom:0px;
padding:0;
width: 170px;
text-align: center;
font: bold 14px Verdana, Geneva, Arial, sans-serfif;
color: #000000; }

HTML code:
<p class="heading2">List Example #2</p>
<ul class="two">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
< /ul>


LIST EXAMPLE #3 - with image

  • List Item 1
  • List Item 2
  • List Item 3

CSS Code:
ul.three {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
list-style-image:url(images/bullet.gif);
list-style-type: square;
}

p.heading3 { margin-top:0px;
margin-bottom:0px;
margin-left: 10px;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px; }

HTML code:
<p class="heading3">LIST EXAMPLE #3</p>
<ul class="three">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
< /ul>


Nested List Example #4

  • List example four
    • List example four
      • List example four

CSS Code:
p.heading4 {margin-bottom:0px;
padding:0;
text-align: center;
width: 225px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #000000; }

ul {
font-size : 12px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #000000;
list-style-type: disc;
margin-top: 0px;}

ul ul li {
font-size : 12px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #000000;
list-style-type: circle;}

ul ul ul li {
font-size : 12px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #000000;
list-style-type: square;
}

HTML Code:
<p class="heading4">Nested List Example</p>
<ul>
<li>List example four</li>
<ul>
<li>List example four</li>
<ul>
<li>List example four</li>
</ul>
</ul>
</ul>

LIST EXAMPLE #5 - Using HTML Character Entity

  • » List example 5
  • » List example 5
  • » List example 5

CSS Code:
p.heading5 {
text-align: center;
width: 400px;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;}

ul.five {
list-style: none;
line-height: 1.5;
font-family: Verdana, Arial, Geneva, sans-serif;
font-size: 11px;
color: #000000;}

HTML code:
<p class="heading5">
LIST EXAMPLE #5 - Using HTML Character Entity</p>
<ul class="five">
<li>&#187; List example 5</li>
<li>&#187; List example 5</li>
<li>&#187; List example 5</li>
< /ul>
< /div>

Tip for 1px border using CSS (See CSS code below)

Note: Please be aware the one px border won't work for Netscape 4 browser when specifying the class for a table. Use the long hand CSS version for the 1 px border, shorthand version won't work in Opera!

.myborder { border-width: 1px; border-style: solid; border-color: #000000; }

Jaybirdsweb.com©2003 - 2005