Links are on the alt text

johndove · 12-21-2012, 04:55 PM

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. - ?

johndove · 12-21-2012, 04:57 PM

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>

Excavator · 12-21-2012, 05:32 PM

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

johndove · 12-21-2012, 05:46 PM

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. - ?

Excavator · 12-21-2012, 06:28 PM

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.