CSS: Progress Indicator (Progress Tracker) alignment issue in IE6 and need to highlig

HTML & CSS
1

I am seeing an issue in alignment of arrow image with the rest of the text and also highlighting an indicator is an issue because of the spacer.

<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>
<STYLE type=“text/css”>

.progress1 {
height:34px;
border-left:1px solid #948a63;
border-top:1px solid #948a63;
border-bottom:1px solid #948a63;
text-align: left;
background-color: #efefe7;
color: #948a63;
font-weight: bold;
font-family: “Trebuchet MS, Arial, Helvetica, sans-serif 80%”;
vertical-align: middle;
}

.progress2 {
height:34px;
border-top:1px solid #948a63;
border-bottom:1px solid #948a63;
text-align: left;
background-color: #efefe7;
color: #948a63;
font-weight: bold;
font-family: “Trebuchet MS, Arial, Helvetica, sans-serif 80%”;
vertical-align: middle;
}

.arrow {
height:34px;
vertical-align: middle;
background:url(arrow1.gif) left no-repeat #efefe7;
padding:0;
border:0;
border-top:1px solid #948a63;
border-bottom:1px solid #948a63;
}
</STYLE>

<title>Arrow Progress Bar Mockup</title>
</head>

<body>
<div>
<span class=“progress1”> Indicator1 </span><span class=“arrow”><img src=“spacer.gif” width=“20” height=“20” border=0></span><span class=“progress2”> Indicator2 </span><span class=“arrow”><img src=“spacer.gif” width=“20” height=“20” border=0></span>
</div>

</body>
</html>
</code>

2

Here is a slightly different way to look at it with hardly any CSS.

[HIGHLIGHT=“”]
<!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”>
<title>Spacing & Padding</title>
<head>

<style type=“text/css”>
<!–
body {
font-family:“Trebuchet MS, Arial, Helvetica, sans-serif 80%”;
color: #948a63;
font-weight: bold;
}

#div1 p {
margin-right:10px;
text-align:left;
border:1px solid #948a63;
}

.progress {
float:left;
padding:5px;
background-color: #efefe7;
}

.arrow {
vertical-align: -4px;
}
–>
</style>
<title>Arrow Progress Bar Mockup</title>
</head>

<body>

<div id=“div1”>
<p class=“progress”>Indicator 1 <img class=“arrow” src=“arrow1.gif” width=“19” height=“19”></p>
<p class=“progress”>Indicator 2 <img class=“arrow” src=“arrow1.gif” width=“19” height=“19”></div>

</body>

</html>

3

Thanks Allan. It almost got me what i need. How i can extend (or span) ‘indicator3’ to end of the right corner of the page.

<!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”>
<title>Spacing & Padding</title>
<head>

<style type=“text/css”>
<!–
body {
font-family:“Trebuchet MS, Arial, Helvetica, sans-serif 80%”;
color: #948a63;
font-weight: bold;
}

#div1 p {
margin-right:0px;
text-align:left;
border-top:1px solid #948a63;
border-bottom:1px solid #948a63;
}

.progress {
float:left;
background-color: #efefe7;
}

.arrow {
vertical-align: -4px;
}
–>
</style>
<title>Arrow Progress Bar Mockup</title>
</head>

<body>

<div id=“div1”>
<p class=“progress” style=“border-left:1px solid #948a63;”>Indicator 1 <img class=“arrow” src=“arrow1.gif” width=“19” height=“19”></p>
<p class=“progress”>Indicator 2 <img class=“arrow” src=“arrow1.gif” width=“19” height=“19”></p>
<p class=“progress” style=“border-right:1px solid #948a63;”>Indicator 3 </p>
</div>

</body>

</html>

4

As I understand it you want to extend all of the indicators equally across the page. Here is my attempt, but there may be a better way. You will note that I have collapsed some of the rules together in this version.

[HIGHLIGHT=“”]
<!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>

<style type=“text/css”>
<!–
body {
font-family:“Trebuchet MS, Arial, Helvetica, sans-serif 80%”;
color: #948a63;
font-weight: bold;
margin:0px;
}

#div1 {
width: 100%;
padding-left:10px;
margin: 0px auto;
min-width: 950px;
max-width: 1200px;
overflow: hidden;
}

#div1 p {
margin: 20px 5px;
text-align:left;
border:1px solid #948a63;
width: 31%;
float: left;
padding: 5px;
background-color: #efefe7;
}

.arrow {
vertical-align: -4px;
}
–>
</style>
<title>Arrow Progress Bar</title>
</head>

<body>

<div id=“div1”>
<p class=“a”>Indicator 1 <img class=“arrow” src=“arrow1.gif” width=“19” height=“19”></p>
<p>Indicator 2 <img class=“arrow” src=“arrow1.gif” width=“19” height=“19”></p>
<p>Indicator 3 <img class=“arrow” src=“arrow1.gif” width=“19” height=“19”></div>

</body>

</html>