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">«</a> <a href="#" class="webcomic-link webcomic1-link previous-webcomic-link previous-webcomic1-link" rel="prev">‹</a> <a href="#" class="webcomic-link webcomic1-link random-webcomic-link random-webcomic1-link">∞</a> <a href="#" class="webcomic-link webcomic1-link next-webcomic-link next-webcomic1-link current-webcomic" rel="next">›</a> <a href="#" class="webcomic-link webcomic1-link last-webcomic-link last-webcomic1-link current-webcomic">»</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; }
make a
elements inline-block
, text-indent
have effect on them.
.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
Post a Comment