SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accessible CSS Image Replacement - issue

    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.


    HTML Code:
    <!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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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:

    Code:
    .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.


Tags for this Thread

Bookmarks

Posting Permissions

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