<style type="text/css">
#breadcrumbs li {
	display: inline;
}

/* CSS3 breadcrumb */
#breadcrumbs li:after {
	content: " > ";
}

#breadcrumbs li.current:after {
	content: "";
}

/* IE6 breadcrumb */
*html #breadcrumbs li {
	background: url( /img/gt.gif ) no-repeat center right;
	padding-right: 10px;
	margin-right: 5px;
}

*html #breadcrumbs li.current {
	background: none;
	padding-right: 0px;
}

/* IE7 breadcrumb */
html>body #breadcrumbs li {
	*background: url( /img/gt.gif ) no-repeat center right;
	*padding-right: 10px;
	*margin-right: 5px;
}

html>body #breadcrumbs li.current {
	background: none;
	padding-right: 0px;
}
</style>

<ol id="breadcrumbs">
	<li><a href="/">Home</a></li>
	<li><a href="/lorum">Lorum</a></li>
	<li class="current">Ipsum</li>
</ol>

<style type="text/css">
#breadcrumbs li {
	display: inline;
}

/* CSS3 breadcrumb */
#breadcrumbs li:after {
	content: " > ";
}

#breadcrumbs li.current:after {
	content: "";
}

/* IE6 breadcrumb */
*html #breadcrumbs li {
	background: url( /img/gt.gif ) no-repeat center right;
	padding-right: 10px;
	margin-right: 5px;
}

*html #breadcrumbs li.current {
	background: none;
	padding-right: 0px;
}

/* IE7 breadcrumb */
html>body #breadcrumbs li {
	background: url( /img/gt.gif ) no-repeat center right;
	padding-right: 10px;
	margin-right: 5px;
}

html>body #breadcrumbs li.current {
	background: none;
	padding-right: 0px;
}
</style>

<ol id="breadcrumbs">
	<li><a href="/">Home</a></li>
	<li><a href="/lorum">Lorum</a></li>
	<li class="current">Ipsum</li>
</ol>

<style type="text/css">
#breadcrumbs li {
	display: inline;
}

/* CSS3 breadcrumb */
#breadcrumbs li:after {
	content: " > ";
}

#breadcrumbs li.current:after {
	content: "";
}

/* IE6 breadcrumb */
*html #breadcrumbs li {
	background: url( /img/gt.gif ) no-repeat center right;
	padding-right: 10px;
	margin-right: 5px;
}

*html #breadcrumbs li.current {
	background: none;
	padding-right: 0px;
}

/* IE7 breadcrumb */
html>body #breadcrumbs li {
	*background: url( /img/gt.gif ) no-repeat center right;
	*margin: 0;
	*padding: 0 5px 0 8px;
}

html>body #breadcrumbs li.current {
	background: none;
	padding-right: 0px;
}
</style>

<ol id="breadcrumbs">
	<li><a href="/">Home</a></li>
	<li><a href="/lorum">Lorum</a></li>
	<li class="current">Ipsum</li>
</ol>

#breadcrumbs li {
	display: inline;
}

#breadcrumbs li:after {
	content: " > ";
}

#breadcrumbs li.current:after {
	content: "";
}

*html #breadcrumbs li {
	background: url( /img/gt.gif ) no-repeat center right;
	padding-right: 10px;
	margin-right: 5px;
}

*html #breadcrumbs li.current {
	background: none;
	padding-right: 0px;
}


<ol id="breadcrumbs">
	<li><a href="/">Home</a></li>
	<li><a href="/lorum">Lorum</a></li>
	<li class="current">Ipsum</li>
</ol>

Nice clean, and semantically correct breadcrumb XHTML accompanied by the CSS.

Create a transparent GIF of  the symbol '>' and save it in /img/gt.gif. This will be used for older browsers that don't support the :after pseudo element.

CSS Breadcrumb Markup

css, navigation

CSS