Cross Browser bullet dividers on a horizontal list

**wrxcrystal06** · Nov 7, 2007 08:57

I am attempting to add image bullet dividers on a horizontal list. The problem I am having is that it does not work cross browser. Might there be a better solution for this? Thanks!

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
background-color:#003366;
}
#mastNav ul {
list-style: none;
float: right;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #fff;
}

#mastNav ul li {
display: inline;
background-image: url("http://www.geocities.com/johnblz187/whiteBullet.gif");
background-repeat:no-repeat;
background-position: right center;
padding: 0 4px 0 4px;
}
#mastNav ul li a:link {color: #fff; text-decoration: none;}
#mastNav ul li a:visited {color: #fff; text-decoration: none;}
#mastNav ul li a:hover {color: #fff; text-decoration: underline;}

#mastNav ul li.mastNavLast a {
color: #FFCC00;
}

#mastNav ul li.mastNavLast {
background-image: none;
}
</style>
</head>

<body>
<div id="mastNav">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li class="mastNavLast"><a href="#">Item 5</a></li>
</ul>
</div>
</body>
</html>

**Dan Schulz** · Nov 7, 2007 09:23

Try floating either the list items or the anchors, then applying the background image to that.

(By the way, just as a personal note, I prefer to use .first-child and .last-child for my first and last child classes, that way I can easily reuse them when needed.)

**wrxcrystal06** · Nov 7, 2007 09:26

Can you possibly provide an example of what you are referring to? As far as .first-child and .last-child I was a bit leary because of cross-browser issues. What browsers will not display those elements correctly?

**Dan Schulz** · Nov 7, 2007 09:56

.first-child and .last-child refer to class names in this case. Specifically class="first-child" and class="last-child" (not the psuedo-selectors, which I use to replace said properties due to IE 6 not understanding them).

As for floating the list items, just float them to the left, but give them a height so you can apply the background images to them, then use some left padding to give you enough space to show the images. (And sorry, I can't provide an example right now, I'm about to log off for the day so I can get a lot of housework done, you know, mopping floors, cleaning the bathroom, stuff like that.)

I'm sure someone else can provide one for you though.

**wrxcrystal06** · Nov 7, 2007 10:36

Dan,

Thank you for your help. Can someone please provide an example?

Thanks!

**Dan Schulz** · Nov 7, 2007 22:11

Would something like this work for you?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Untitled Document</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="description" content="A brief description of the current page goes here." />
	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
	<style type="text/css" media="screen">

		html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
		dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
		a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
		strong, sub, sup, textarea, tt, var {
			margin: 0;
			padding: 0;
		}

		body {
			background: #036;
			color: #FFF;
		}

		#menu {
			float: right;
			font: 11px/14px verdana, arial, helvetica, sans-serif;
			list-style: none;
			padding-right: 4px;
		}
			#menu li {
				float: left;
			}

			#menu a {
				background: url("http://www.geocities.com/johnblz187/whiteBullet.gif") right center no-repeat;
				color: #FFF;
				display: block;
				padding: 0 4px;
				text-decoration: none;
			}

			#menu a:hover, #menu a:active, #menu a:focus {
				text-decoration: underline;
			}

			#menu .last-child {
				background-image: none;
				color: #FC0;
			}

	</style>
</head>
<body>
<ul id="menu">
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
	<li><a class="last-child" href="#">Item 5</a></li>
</ul>
</body>
</html>

**wrxcrystal06** · Nov 8, 2007 09:35

Dan,

This is definitely getting somewhere, but it is still a bit off. The bullet does not line up in the center for any of the browsers... it appears to be a few pixels off to the left. Is there anyway around this?

Thanks!

**Paul O'B** · Nov 8, 2007 11:12

Hi,

I would float the anchor also and position the bullet vertically with a pixel height. The 50% center position is likely to be rounded up and down a be 1 pixel out.

Its probably easiest just to specify the exact position if you are that fussy. Of course it won't scale should the text be resized but thats a minor problem.

You also need to have 6px padding on the right of the list because the bullet is 2px wide and therefore to be centred horizontally you need 4px at the beginning and 6px at the end.

This renders pixel perfect in ie and firefox.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
background-color:#003366;
}
ul#mastNav {
list-style: none;
float: right;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #fff;
margin:0;
padding:0;
}

ul#mastNav li {
float:left;
background: url("http://www.geocities.com/johnblz187/whiteBullet.gif") no-repeat 100% 6px;
}
ul#mastNav li a{float:left;padding: 0 6px 0 4px;}
ul#mastNav li a{color: #fff; text-decoration: none;}
ul#mastNav li a:hover { text-decoration: underline;}

ul#mastNav li.mastNavLast a {
color: #FFCC00;
}

ul#mastNav li.mastNavLast {
background-image: none;
}
</style>
</head>
<body>
    <ul id="mastNav">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li class="mastNavLast"><a href="#">Item 5</a></li>
    </ul>
</body>
</html>

**CraniumDesigns** · Nov 8, 2007 11:19

paul is the man. haha.

**wrxcrystal06** · Nov 8, 2007 11:36

I second that, Paul is definitely the man. Thanks again for the feedback!

**Dan Schulz** · Nov 8, 2007 13:40

Eh, I just "borrowed" your original background position (was getting late). Otherwise I would have positioned it better (that, and I didn't look at how your original code rendered anyway).

**wrxcrystal06** · Nov 8, 2007 13:48

No worries Dan, I appreciate your help as well.

User Tag List

Thread: Cross Browser bullet dividers on a horizontal list

Thread Tools

Display

Cross Browser bullet dividers on a horizontal list

Bookmarks

Bookmarks

Posting Permissions