Accessible CSS Image Replacement - issue

HTML & CSS
1

Hi,

I have the following code. Here at PasteBin and below.

I’d like when images are disabled for the text currently in the SPAN to be displayed.

What do I need to change below to achieve this?

I really appreciate any help at all with this, it’s been sending me a bit mad these past few days.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 

<head> 

<!-- Title --> 
<title>CSS Test</title>

<style type="text/css">
a.shipping-info{border:1px solid #000;background:url('http://indiawebsearch.com/files/image/thumb_googlelogo.jpg') 0 -59px no-repeat; width: 111px;height:59px} 
a span {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

ul#mega {
	float:left;
	width: 100%;
	list-style: none;
	font-size: 1.1em;
}
ul#mega li {
	float: left;
	margin: 0; padding: 0;
	position: relative;
	z-index:1 /* oh my word!!!! */
}
ul#mega li a {
	float: left;
	line-height:1.6em
}
ul#mega li:hover a, ul#mega li a:hover { background-position: left bottom; }
ul#mega li .sub {
	position: absolute;	
	top: 58px; left: 0px;
	float: left;
	display: none;
}
ul#mega li .row {clear: both; float: left; width: 100%; margin-bottom: 10px;}
ul#mega li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: 150px;
	float: left;
}
ul#mega .sub ul li {
	width: 100%;
	color: #fff;
}
 
ul#mega li .sub {
	position: absolute;
	padding: 20px 20px 20px;
	float: left;
	width:440px!important;
	display: none;
}








/* ---------- Mega Drop Down --------- */
#mega {
list-style:none;
}
#mega li {
float:left;
position:relative;
}
#mega li:hover {
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
padding:7px 0 1px 0;
margin-top:-7px;
z-index:1; /* shadow above adjacent li */
}
#mega a {
color:#000;
outline:0;
text-decoration:none;
display:block;
line-height:2em;
}
/* ----------- Hide/Show Div ---------- */
#mega div {
position:absolute;
left:-999em;
margin-top:58px;
margin-left:1px;
width:350px;
padding:0 10px 10px;
border-top:0;
font-weight:normal;
text-align:left;
background:#19bcef;
}
#mega li:hover div {
left:-1px;top:auto;
}
#mega li.dif:hover div {
left:-221px;
}
/* --------- Within Div Styles --------- */
#mega div h2 {
background:#999;
font-size:1em;
padding:0 10px;
margin:10px 0 5px 0;
clear:both;
float:left;
width:330px;
position:relative; /* makes above drop shadow */
}
#mega div p {
float:left;
width:106px;
padding-left:10px;
position:relative; /* makes above drop shadow */
}
#mega div p a {
text-decoration:underline;
float:left;
clear:left;
width:100%; /* For IE6/7 */
line-height:1.4;
}
#mega div a:hover, #mega div a:focus, #mega div a:active {
text-decoration:none;
}
</style>

</head>

<body id="home">

<div id="container">    

      <div id="top">&nbsp;</div>    

      <div id="middle">  
	  
      <div id="nav"> 

        <ul id="mega">
 
          <li><a href="#" class="shipping-info"><span>This is the text that should display when images are OFF</span></a> 
          <b class="s4"></b> 
          <div> <b class="s1"></b><b class="s2"></b><b class="s3"></b><p><a href="#">Test Link 1</a></p> 
          </div>
 
          </li>
		  
        </ul>  

      </div>  
 
  </body> 
 
</html>

Thank you.

2

simple suggestion,

depending on how far back you want to extend support, and if your image is opaque ( that will always be question in this kind of queries) you could use my method here:


.shipping-info { position:relative; display:block; height: (height of you textimage); width: (width of your textimage); overflow:hidden;zoom:expression(runtimeStyle.zoom=1,insertAdjacentHTML('beforeEnd','<span class="after"></span>');
}
.shipping-info:after {position:absolute; height:inherit; width:inherit; background: url(textimage.jpg) no-repeat left top; content:""; }

this also eliminates the need for you to wrap the text in a span.

3

It isn’t really clear what you are trying to achieve there, but image replacement with text available when images are off is pretty simple. See this example:

Header replacement