Gossamer Forum
Home : Products : Gossamer Links : Discussions :

quick css question

Quote Reply
quick css question
I'm trying to replace my "new" with an image, but I am having the problem of my text bleeding through the image. So... I need to hide the text, but still show the image.

I would think this would work, but it hides EVERYTHING.

Code:

span.new-item span {
display:none;
}
span.new-item {
background: url(images/new.gif) no-repeat;
}


That would be my logic since the 'new-item' is enclosed in two <span>'s.

Any help would be appreciated.

Thanks,

- Jonathan
Quote Reply
Re: [jdgamble] quick css question In reply to
Changing .new-item span to be display: none results in the .new-item span being a 0x0 area. To make your image viewable, you can set a padding of the same size as your image on .new-item. Not sure how IE's going to treat that though.

Adrian
Quote Reply
Re: [brewt] quick css question In reply to
This is what I ended up using:

Code:

.new-item {
background: url(images/new.gif) no-repeat;
}
.new-item span {
padding-left: 30px;
}


even though this:

Code:

.new-item {
background: url(images/new.gif) no-repeat;
}
.new-item span {
display:none;
}


seems logical because 'display:none;' SHOULD only hide the second span item to my reasoning. But it hides everything for some wierd reason.

The first code works, but the new text is padded to the right. I'm just hoping it won't cause a conflict with a link that is new and updated or new and popular etc...

Obviously I can edit the html code to get my desired results, i'm just trying to understand and learn css in the process.

If you think of a better way, let me know.

Thanks,

- Jonathan
Quote Reply
Re: [jdgamble] quick css question In reply to
Quote:
seems logical because 'display:none;' SHOULD only hide the second span item to my reasoning. But it hides everything for some wierd reason.
It isn't like that because hiding the inside span (display: none essentially removes the element, it will now take up no space, unlike a visibility: hidden rule), will result in the inner span taking up no space, and the outer span will shrink.

Adrian
Quote Reply
Re: [brewt] quick css question In reply to
huh... well that did it:

Code:

.new-item {
background: url(images/new.gif) no-repeat;
}
.new-item span {
visibility: hidden;
}


at least it works for ie and mozilla (latest versions).

Thanks,

- Jonathan
Quote Reply
Re: [jdgamble] quick css question In reply to
That only works if the "new" text is the same size as your image. If it's bigger then you'll have extra spacing around your image. If it's smaller then all of the image won't be shown.

Adrian