SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Vertical List Spacing

    Ok, so I have a vertical list. Now in FF it looks somewhat ok. The headings are fine, but the sub headings have large spaces between the text and the next line of text. In IE6 this does not occur, however the main headings are 1px more of space under them. In IE5 the IE6 1px space is much larger. How can this be fixed?

    Here is the code:

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
     <style>
     ul#navigation{
     	margin: 0px;
     	padding: 0px;
     }
     ul#navigation li ul{
     	list-style-type: disc;
     	color: #8C0000;
     }
     ul#navigation li{
     	margin-bottom: 1px;
     }
     ul#navigation li a.header{
     	padding: 3px 0px 3px 10px;
     	background-color: #00495C;
     	color: #FFF;
     	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     	font-size: 0.8em;
     	font-weight: bold;
     	display: block;
     	text-decoration: none;
     	width: 170px;
     	border-right: 5px solid #00384B;
     	border-left: 5px solid #00384B;
     }
     ul#navigation li a.header:hover{
     	background-color: #6BA2A9;
     }
     ul#navigation li ul a{
     	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     	font-size: 0.8em;
     	color: #3B788B;
     }
     ul#navigation li ul a:hover{
     	color: #6BA2A9;
     }
     </style>
     	<title>Title!</title>
     </head>
     <body>
     <ul id="navigation">
     	<li><a href="#" class="header">Heading 1</a></li>
     	<li><a href="#" class="header">Heading 2</a></li>
     	<li><a href="#" class="header">Heading 3</a>
     		<ul>
     			<li><a href="#">Sub Heading 1</a></li>
     			<li><a href="#">Sub Heading 2</a></li>
     			<li><a href="#">Sub Heading 3</a></li>
     			<li><a href="#">Sub Heading 4</a></li>
     			<li><a href="#">Sub Heading 5</a></li>
     		</ul>
     	</li>
     </ul>
     </body>
     </html>
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Try setting the line-height on the list.

    Code:
     ul#navigation{
      margin: 0px;
      padding: 0px;
      line-height:1.2em;
     }
    Its nor perfect but its better.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •