Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post

    square bullets in navigation

    How would you make a navigation with an unordered list display so that after each list item, a square, colored bullet would appear ( except for at the last item of course) I know theres a way to make it square, but its not accepted cross browser from what I read.

    My css is currently as follows
    Code:
    @font-face {
        font-family: NovaSOLIDSOLID;
        src: url("novasolid_trial___-webfont.eot");
        src: url("novasolid_trial___-webfont.eot?#iefix") format("embedded-opentype"),
             url("novasolid_trial___-webfont.woff") format("woff"),
             url("novasolid_trial___-webfont.ttf") format("truetype"),
             url("novasolid_trial___-webfont.svg#NovaSOLIDSOLID") format("svg");
        font-weight: normal;
        font-style: normal;
    
    }
    
    #menudiv {
    	width: 875px;
    	float: left;
    	clear: left;
    	height: 20px;
    	margin-top: 40px;
    }
    
    #leftmenu {
    	width: 875px;
    	height: 20px;
    	float: left;
    	padding-left:20px;
    }
    
    #rightmenu { 
    	width: 0px;
    	float: right;
    	color: #FFF;
    }
    
    #rightmenu .mainnav {
    	float: right;
    }
    
    #rightmenu span {
    	float:left;	font-size: 30px;
    }
    
    .mainnav {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    .mainnav * {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    
    .mainnav ul {
    	position: absolute;
    	top: -999em;
    	display: none;
    }
    
    #rightmenu .mainnav li {
    	margin-right: 0;
    	margin-left: 20px;
    }
    
    .mainnav li {
    	float: left;
    	position: relative;
    	z-index: 999;
    	height: 20px;
    	line-height: 20px;
    	margin-right: 20px;
    }
    
    .mainnav a {
    	display: block;
    	font-size: 30px;
    	font-weight: normal;
    	font-family: NovaSOLIDSOLID;
    	margin: 0;
    	padding: 0;
    	color: #FFF;
    	text-transform: uppercase;
    	text-decoration: none;
    	letter-spacing:.09em;
    }
    
    .mainnav li.current-menu-item a,
    .mainnav li#current a,
    .mainnav li.current-cat a,
    .mainnav li.current_page_item a {
    	text-decoration: none;
    	color: #CCC;
    }
    
    .mainnav li a:hover {
    	text-decoration: none;
    	color: #999;
    }
    
    .mainnav ul li{ 
    	width: 140px;
    }
    
    .mainnav li:hover ul,
    ul.mainnav li.sfHover ul {
    	left: -10px;
    	top: 20px;
    	padding-top: 7px;
    	width: 142px;
    	background: url(images/ulbg.png) no-repeat bottom;
    	padding-bottom: 15px;
    }
    
    .mainnav li:hover li ul,
    .mainnav li.sfHover li ul {
    	top: -999em;
    }
    
    .mainnav li li:hover ul,
    ul.mainnav li li.sfHover ul {
    	left: 140px;
    	top: -7px;
    }
    
    .mainnav li:hover ul,
    .mainnav li li:hover ul {
    	top: -999em;
    }
    
    .mainnav li li {
    	display: block;
    	padding: 0px;
    	height: auto !important;
    	border: none;
    	background: #121212 url(images/linebg.png) repeat-x bottom;
    	margin: 0;
    	padding-top: 8px;
    	padding-bottom: 10px;
    	border-left: solid 1px #1f1f1f;
    	border-right: solid 1px #1f1f1f;
    }
    
    .mainnav li li#current a,
    .mainnav li li.current-cat a,
    .mainnav li li.current_page_item a,
    .mainnav li li:hover a {
    }
    
    .mainnav li li a:link, 
    .mainnav li li a:visited {
    	display: block;
    	height: auto !important;
    	padding-top: 8px;
    	padding-bottom: 8px;
    	text-transform: uppercase;
        color: #CCC;
    	font-weight: normal;
    	font-family: NovaSOLIDSOLID;	font-size: 30px;
    border: none;
    	margin: 0;
    	padding: 0;
    	margin-left: 10px;
    }
    
    .mainnav li li:hover {	
    	background: #CCC !important;
    }
    
    #rightmenu .mainnav li li {
    	margin:0;
    }

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    You will have to use list-style-image, assuming list-style-type: square is not sufficient.


  •  

    Posting Permissions

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