SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Support for list style image cross browser is a bit dodgey, and you are better off using the image as a background to the <li> :
    Code:
    ul#listmenu {
    	margin: 0;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #959595;
    	padding: 0;
    }	
    
    ul#listmenu li {
    	list-style: none;
    	background: url(../images/main_images/img_industry_bullet.gif) no-repeat left center;
    	margin: 0;
    	padding: 0.5em 0 0.5em 15px;
    	border-bottom-width: 1px;
    	border-bottom-style: dotted;
    	border-bottom-color: #207EC9;
    }

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To do that, the lnks need to be set to block display, and they will determine the size of the <li>s. To counteract a problem with IE spacing the <li>s when the <a>s are blocks, the <li>s will need to be floated left and given a 100&#37; width. Instaed of left padding on the <li> making room for the bullet graphic, that can now be done with a left margin on the <a> elements. Try this css :
    Code:
    ul#listmenu li {
    	list-style: none;
    	background: url(../images/main_images/img_industry_bullet.gif) no-repeat left center;
    	margin: 0;
    	border-bottom-width: 1px;
    	border-bottom-style: dotted;
    	border-bottom-color: #207EC9;
    	padding: 2px 0;
    	float: left;
    	width: 100%;
    }
    ul#listmenu a {
    	display: block;
    	height: 2.4em;
    	line-height: 2.5em;
    	margin-left: 10px;
    	padding-left: 5px;
    	color: #525252;
    }
    ul#listmenu a:hover {
    	background-color: #E1F1FB;
    }

    Edit: It's now New Years Day here - Happy New Year if you are an Aussie - if not, ....wait ....

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Attachment not approved yet, but to include the whole area in the hover, move the bullet image to the <a> tag instead, and provide room for it with left padding on the <a> similar to the way it was done on the <li> :
    Code:
    ul#listmenu li {
    	list-style: none;
    	margin: 0;
    	border-bottom-width: 1px;
    	border-bottom-style: dotted;
    	border-bottom-color: #207EC9;
    	padding: 0;
    	float: left;
    	width: 100%;
    }
    ul#listmenu a {
    	background: url(..s/images/main_images/img_industry_bullet.gif) no-repeat left center;
    	display: block;
    	height: 2em;
    	line-height: 2em;
    	padding-left: 15px;
    	color: #525252;
    }
    ul#listmenu a:hover {
    	background-color: #E1F1FB;
    }

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The height and line-height properties go hand in hand here - if the line height is equal to the height, the text will be centred vertically. I used ems in the example as it allows for text resizing. You could use the 30px if you like, but it won't allow quite as much text resizing :
    Code:
    ul#listmenu a {
    	background: url(..s/images/main_images/img_industry_bullet.gif) no-repeat left center;
    	display: block;
    	height: 30px;
    	line-height: 30px;
    	padding-left: 15px;
    	color: #525252;
    }


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
  •