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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Links are on the alt text

    see URL: http://catalyst.backstageweb.net.

    The Facebook and Twitter buttons are showing and linking to the alt text. The alt text shouldn't be showing and it should be linking to the whole button.

    Code:
    <div id="fb"><a href="#"><img src="<?php bloginfo('template_url') ?>;/images/buttonFB.jpg" alt="Facebook" title="Like Us!" border="0"></a>
    </div>
    
    <div id="twitter"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/buttonTwitter.jpg" alt="Twitter" title="Follow us on Twitter!" border="0"></a></div>
    Code:
    #fb {
    	background:url(../css/images/buttonFB.png) no-repeat;
    	left:272px;
    	top:0;
    	position:absolute;
    	height:45px;
    	}
    	
    #twitter {
    	background:url(../css/images/buttonTwitter.png) no-repeat;
    	left:316px;
    	top:0;
    	position:absolute;
    	height:45px;
    	}
    This is exactly how they're coded on another site without incident. - ?

  • #2
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Sorry, that's /css/...

    Code:
    <div id="fb"><a href="#"><img src="<?php bloginfo('template_url'); ?>/css/images/buttonFB.jpg" alt="Facebook" title="Like Us!" border="0"></a>
    </div>
    
    <div id="twitter"><a href="#"><img src="<?php bloginfo('template_url'); ?>/css/images/buttonTwitter.jpg" alt="Twitter" title="Follow us on Twitter!" border="0"></a></div>

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello johndove,
    You attempt to load your social icons twice, once from inside the anchor and again as a background image from the CSS.
    When the img fails to load from the markup, because the path or name is wrong, the alt shows. The image also shows because it's loaded again as a background.


    Remove that background image and check your img src= path and name.

    Correct path to one of your images - http://catalyst.backstageweb.net/wp-...tonTwitter.png
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    johndove (12-21-2012)

  • #4
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thanks Excavator! I knew something was amiss having two calls to the images, but when I removed the call from the css and just left this:

    Code:
    <img src="<?php bloginfo('template_url'); ?>/css/images/buttonFB.jpg
    no images displayed at all. I obviously don't have it coded right. It doesn't seem like I should have to put the absolute path in there. - ?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Try editing your path, like this -
    Code:
    					</ul>
    	</div><!--end 'recent_posts_wrap'-->
    </div><!--end 'recent_posts'-->
    
    <div id="dogcat"></div>
    
    
      
      
    <a id ="fb" href="#"><img src="../css/images/buttonFB.png" alt="Facebook" title="Like Us!" border="0"></a>
    
    <a  id="twitter" href="#"><img src="../css/images/buttonTwitter.png" alt="Twitter" title="Follow us on Twitter!" border="0"></a>
    
    </div><!--end 'left'-->
    
    
    <div id="right">
    If that path doesn't work, see this explanation of relative/absolute paths.

    What are you writing your markup in? Most editors will insert an image with a path relative to the working directory. As long as you're using a directory structure on your local machine that is similar to your server, that path will work.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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