CodingForums.com - View Single Post - IE7 user progress (list) doesn't display background

das2012 · 05-15-2012, 06:46 PM

IE7 is not displaing the button background on my user progress. All other browsers are working fine. In short, the buttons are displaying with a white background...which makes the text difficult to see since it is also white . Here is how it should be working depending on their location in the 6 step process:

past = light blue button; css rule = active
present = white button; rule = current
future = dark blue button; rule = inactive

Here's some sample code that reproduces the problem.

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 type="text/css">
#pageNav {
	margin: 0 auto;
	padding-top: 5px;
	width: 980px;
	overflow: hidden;
}

.userProgressArea {
	margin: 0 auto;
	width: 990px;
}

#progress {
	font-size: 1em;
	margin: 0 0;
	font-weight: bold;
}

#progress li {
	float: left;
	width: 148px;
	list-style: none;
	text-decoration: none;
}

#progress a {
	padding: 8px;
	position: relative;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}

#progress a:hover { text-decoration: none; }

#progress a:hover span.active { text-decoration: underline; }

#progress a:hover span.inactive { text-decoration: none; }

#progress {
	background: #999999;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	width: auto;
}

#progress a {
	display: block;
	color: #fff;
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	border-radius: 5px 5px 5px 5px;
	margin-left: 8px;
}

#progress a.current {
	color: #1E5799;
	font-size: .95em;
	background-position: 0px bottom;
	background-repeat: no-repeat;
}

#progress a.active {
	background: #d5ebfb;
	background:
 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q1ZWJmYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4OWMzZWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #d5ebfb 0%, #89c3eb 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d5ebfb),  color-stop(100%, #89c3eb) );
	background: -webkit-linear-gradient(top, #d5ebfb 0%, #89c3eb 100%);
	background: -o-linear-gradient(top, #d5ebfb 0%, #89c3eb 100%);
	background: -ms-linear-gradient(top, #d5ebfb 0%, #89c3eb 100%);
	background: linear-gradient(top, #d5ebfb 0%, #89c3eb 100%);
	/*IE6-8*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5ebfb', endColorstr='#89c3eb', GradientType=0);
}

#progress a.inactive {
	background: #7db9e8;
	background:
 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #7db9e8 0%, #207cca 49%, #2989d8 50%, #1e5799  100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7db9e8),  color-stop(49%, #207cca), color-stop(50%, #2989d8),  color-stop(100%, #1e5799) );
	background: -webkit-linear-gradient(top, #7db9e8 0%, #207cca 49%, #2989d8 50%,  #1e5799 100%);
	background: -o-linear-gradient(top, #7db9e8 0%, #207cca 49%, #2989d8 50%, #1e5799  100%);
	background: -ms-linear-gradient(top, #7db9e8 0%, #207cca 49%, #2989d8 50%, #1e5799  100%);
	background: linear-gradient(top, #7db9e8 0%, #207cca 49%, #2989d8 50%, #1e5799 100%);
	/*IE6-8*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#1e5799', GradientType=0);
}
	
 #progress a:hover {
	background: #ea1717;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhMTcxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiNTAzMDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ea1717 0%, #b50303 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea1717), color-stop(100%,#b50303));
	background: -webkit-linear-gradient(top,  #ea1717 0%,#b50303 100%);
	background: -o-linear-gradient(top,  #ea1717 0%,#b50303 100%);
	background: -ms-linear-gradient(top,  #ea1717 0%,#b50303 100%);
	background: linear-gradient(top,  #ea1717 0%,#b50303 100%);
	/*IE6-8*/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea1717', endColorstr='#b50303',GradientType=0 );

} 
</style>
</head>

<body>
<div id="pageNav">
    <div class="userProgressArea">
      <ul id="progress">
        <li>
          <a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id36'),{'j_id36:j_id38:0:j_id41':'j_id36:j_id38:0:j_id41'},'');}return false" class="active"> Company</a>
        </li>
        <li>
          <a href="#" class="current"> Producers </a>
        </li>
        <li>
          <a href="#" class="inactive"> States </a>
        </li>
        <li>
          <a href="#" class="inactive"> Lines </a>
        </li>
        <li>
          <a href="#" class="inactive"> Review </a>
        </li>
        <li>
          <a href="#" class="inactive"> Checkout </a>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

Thanks in advance for your insight!!!