Re: Invisible Text

Shawn Christopher wrote:
> Matthew Raymond wrote:
> 
> 
>>Martijn wrote:
>>
>>
>>>Well, I think nowadays a very large negative text-indent is used to
>>>hide the text in current browsers,
>>
>>
>>   I was going to use text-indent and "overflow: hidden" to hide the 
>>content, but then I realized that browser with only CSS 1 support 
>>would look kinda strange. I may just have to settle for that, though. 
>>It actually works well in IE6, Firefox and Opera 8. I didn't use a 
>>negative value, though:
>>
>>| text-index: [value greater than width];
>>| overflow: hidden;
>>
>>   I like the negative value idea. It allows for the content to be 
>>forced off the page in CSS1 browsers. It's still feels like a dirty 
>>hack, though. I may go back to just using <span> elements with 
>>"display: none"...
>>
>>
>>>but css has got color:transparent,
>>
>>>which would be a convenient way to hide text:
>>>http://www.w3.org/TR/2003/CR-css3-color-20030514/#color0
>>
>>
>>   I'd actually tried something similar ("color: rgba(0,0,0,0);"), but 
>>it didn't work in IE, Firefox or Opera. The same is true for the 
>>"transparent" keyword. I know I have the CSS right because "color: 
>>red;" works fine.
>>
>>
> 
> I'm new to the list, CSS, and this thread however is there a reason that 
> the text needs to be hidden however still needs to be there? Some ideas 
> that I've had since camping out on this however.
> 
> 1. Can the text be avoided from being entered (Keep it Simple)

    Not really. I'm using Javascript-free CSS-based rollovers. Here's an 
example...

HTML:
| <div class="navbar">
|   <a href="page1.html" id="navbar-page1">[Page 1]</a>
|   <b><a href="page2.html" id="navbar-page2">[Page 2]</a></b>
|   <a href="page3.html" id="navbar-page3">[Page 3]</a>
|   <a href="page4.html" id="navbar-page4">[Page 4]</a>
|   <a href="page5.html" id="navbar-page5">[Page 5]</a>
|   <a href="page6.html" id="navbar-page6">[Page 6]</a>
| </div>

CSS:
| .navbar {
|   width: 206px;
|   margin: 0px;
|   padding: 0px;
|   border: none;
| }
|
| .navbar a {
|   display: block;
|   height: 25px;
|   width: 166px;
|   padding: 0px;
|   margin: 0px;
|   margin-left: 40px;
|   border: none;
|   background-position: top left;
|   text-indent: -10000px;
|   overflow: hidden;
| }
|
| .navbar b a { background-position: left; }
| .navbar a:hover { background-position: bottom left; }
|
| #navbar-page1 { background-image: url(image/navbar-page1.png); }
| #navbar-page2 { background-image: url(image/navbar-page2.png); }
| #navbar-page3 { background-image: url(image/navbar-page3.png); }
| #navbar-page4 { background-image: url(image/navbar-page4.png); }
| #navbar-page5 { background-image: url(image/navbar-page5.png); }
| #navbar-page6 { background-image: url(image/navbar-page6.png); }

    (Note: Markup has been modified to hide the nature of the site.)

    So the effect is that the text displays when the CSS file doesn't 
load, when the styling is turned off, or when the user agent doesn't 
support CSS. This also allows for alternative stylesheets that perhaps 
display the text over the top of a common rollover image, or stylesheets 
that just use different rollover images.

    If I'd used <img> elements, I'd have needed to use Javascript to 
swap the image. Also, I'd have to worry about the |alt| text showing up 
on mouseover.

    I've yet to find a better pure CSS rollover method for my site.

> 2. Can the text (as a lame way to do it) just the be the same color as 
> the background p {color: white} on a white background?

    No, there is an image for the background.

> I guess if these aren't viable options then I'm gonna learn something 
> from this list. :-D sorry for the annoyance this this has been covered.

    No problem. They're good questions to ask.

Received on Friday, 24 June 2005 14:11:07 UTC