Topic: CSS "New Posts" Image Troubles

Ok...Here's the deal. I would like to have the CSS value ".newtext a:link" display the image below without showing the text:

http://img208.echo.cx/img208/6228/new2pu.jpg

I want users to be able to click it without having to see the "New Posts" text beside it.

I've already tried "display: none;" and the likes...It makes all the link (including the image) disappear.
Is this even possible? To make the text disappear, but let the image link remain, while still being clickable?

2

Re: CSS "New Posts" Image Troubles

The usual trick is to set the image as a background image to an <a> tag set as display block. You then give the <a> tag zero height and top padding large enough to accomodate the image. Another way is to nest a span inside the <a> tag and put the link text in the span. You can then make the span vanish and still have a working link.

Re: CSS "New Posts" Image Troubles

.newtext a:link { font-size: 9px; color: #6F0000; background: url(../../img/Bauglir/new.jpg) no-repeat; line-height: 0px }

This is the code I have so far. And it doesn't do anything.
It gives me the correct background and a linking image, it just doesn't make the text disappear. Every time I do anything to make the text disappear, the image disappears as well - such as setting the whole text to 0px, or using "display: none".

I would like to do this without the span tag as I am trying to design it entirely in CSS for a template.


Can you explain in more detail? Perhaps I am confused.

4

Re: CSS "New Posts" Image Troubles

Try this

.newtext a {display:block; width: wpx; height: 0; padding-top: hpx; background: url(../../img/Bauglir/new.jpg) no-repeat; overflow:hidden }

wpx = your images width
hpx = your images height

The trick is to know that a background image acts as background to the whole "box" including padding but the content i.e. text only occupies its height. That and setting the <a> to display block.

Re: CSS "New Posts" Image Troubles

Woah...Ok...That works, except that the image is appearing on the next line down.

Re: CSS "New Posts" Image Troubles

i guess thats cos of display:block; is that needed?

7

Re: CSS "New Posts" Image Troubles

Yes. If you can't use display:block than you're screwed.

Re: CSS "New Posts" Image Troubles

Paul wrote:

Yes. If you can't use display:block than you're screwed.

Dang.
Oh, well. What I did is make ".newtext" the same color as the background, and made ".newtext a" bold, gave it padding, and changed the color from the default font. This sets it apart and makes it more visible.

Thanks for the tips. I guess it won't work out. *shrugs*