Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy IE7 user progress (list) doesn't display background

    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!!!
    Last edited by das2012; 05-15-2012 at 07:39 PM.

  • #2
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No one out there brave enough to tackle this one?

  • #3
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    I'm pretty sure this type of 'reverse psychology' and condesension will get you the help you need

    Quote Originally Posted by das2012 View Post
    No one out there brave enough to tackle this one?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •