css - Text image replacement within a link -


i trying replace navigation text images. i've applied images backgrounds, text-indent: -9999px trick doesn't seem working. if apply nav holding links, links , images disappear entirely. if apply links themselves, nothing changes. replacement being made updated wordpress plugin, changing html code prohibitive.

<nav class="webcomic-above"> <a href="#" class="webcomic-link webcomic1-link first-webcomic-link first-webcomic1-link">&laquo;</a> <a href="#" class="webcomic-link webcomic1-link previous-webcomic-link previous-webcomic1-link" rel="prev">&lsaquo;</a> <a href="#" class="webcomic-link webcomic1-link random-webcomic-link random-webcomic1-link">&infin;</a> <a href="#" class="webcomic-link webcomic1-link next-webcomic-link next-webcomic1-link current-webcomic" rel="next">&rsaquo;</a> <a href="#" class="webcomic-link webcomic1-link last-webcomic-link last-webcomic1-link current-webcomic">&raquo;</a> 

.webcomic-above a.first-webcomic-link{ background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/first-arrow.gif) 0 0 no-repeat; padding:2px 12px;   } .webcomic-above a.previous-webcomic-link{ background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/previous-arrow.gif) 0 0 no-repeat; padding:2px 17px; } .webcomic-above a.next-webcomic-link { background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/next-arrow.gif) 0 0 no-repeat; padding:2px 17px; } .webcomic-above a.last-webcomic-link { background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/last-arrow.gif) 0 0 no-repeat; padding:2px 12px; } 

http://jsfiddle.net/ahun4/

make a elements inline-block, text-indent have effect on them.

updated example here

.webcomic-above {     text-indent: -9999px;     display:inline-block; } 

according documentation, text-indent applies block elements. anchor elements inline default. making them inline-block fixes this.


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -