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

**steve3151** · Mar 10, 2011 22:16

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>

**AllanP** · Mar 11, 2011 19:39

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

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">
<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&nbsp;<img class="arrow" src="arrow1.gif" width="19" height="19"></p>
  <p class="progress">Indicator 2&nbsp;<img class="arrow" src="arrow1.gif" width="19" height="19"></div>
 
</body>
 
</html>

**steve3151** · Mar 12, 2011 00:41

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">

</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>

**AllanP** · Mar 12, 2011 02:22

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.

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">
<!--
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&nbsp;<img class="arrow" src="arrow1.gif" width="19" height="19"></p>
  <p>Indicator 2&nbsp;<img class="arrow" src="arrow1.gif" width="19" height="19"></p>
  <p>Indicator 3&nbsp;<img class="arrow" src="arrow1.gif" width="19" height="19"></div>
 
</body>
 
</html>

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions