Clear/transparent text?

[MaggieMagill]

Is there a way to have text render as clear, transparent or invinsible?

Here's what I'm trying to do -

Not an applied or publicly available page just something I'm trying out in
order to learn the differences in browser rendering, CSS methods, page
flow, etc. I figure that when stripped of style a page should render in
somewhat of an intelligent & ordered manner for a user.

In trying to get around JavaScript usage for rollover graphic buttons, I
came across a cute little diddy to accomplish a rollover that works nicely
within CSS methods.

But stripping the "style" from the page shows, understandably, no linkable
item at all.

Graphic buttons with a rollover effect are class styled as:

a.next, a:visited.next
{display: block;
width:77px;
height:22px;
background-color:transparent;
background-image: url(../images/buttons/next_g.gif);
text-decoration: none;}

a:hover.next
{display: block;
background-color:transparent;
background-image: url(../images/buttons/next.gif);
text-decoration: none;}

- and called with:

<a class="next" href="nextpage.html"></a>

I can easily understand why the link wouldn't show as such when the page is
stripped of style.

A thought about defining a "clear", "transparent" see-thru style and having
a normal text link enclosed within that style in the html code makes me
think that upon viewing the styled page it would be "hidden" but stripped
of style it would show as a text-link.

So far the closet thing to "hidden" I can come up with is a span class
applied to the .html">hidden text</a> :
span.hidden {
font-size:0%;
font-weight:light;
font-style:italic;
line-height: .1px;
}

Color matching the font is out of the question due to a gradient and border
in the graphic. Italic "thins" it out a bit. It's a bit of a "hack" but
gives the best results across IE6, FireFox 1.0 & Opera7.54.

Is there a technique to actually give text a transparency? Or is the lack
of logic & reasoning for needing "clear" text make the goal unattainable?

 

[MaggieMagill]

I've also played with the visibility:hidden and the display:none
declarations but with the other little tweeks that I needed to make those
rollovers work cleanly I had some conflicts.

With the graphic rollover class that I posted, there would be some problems
across the IE, FF, and Opera browsers if I wanted to use a border with
them. The only way I could work around it was to create a div ID with the
same sizes as the graphic used for the button. That ID box had the border
declarations applied to it. This took care of the different ways the 3
browsers render the border/padding issue and made the graphic placement,
borders and general appearance identical across the 3 browsers.

The rollover a.class and div id is:

a.next, a:visited.next
{display: block;
width:77px;
height:22px;
background-color:transparent;
background-image: url(../images/buttons/next_g.gif);
text-decoration: none;}

a:hover.next
{display: block;
background-color:transparent;
background-image: url(../images/buttons/next.gif);
text-decoration: none;}

#nextnav
{width:77px;
height:22px;
border:2px;
border-color:rgb(60,60,60);
border-style:groove;
}

I called it with:
<div id="nextnav"><a class="next" href ~etc~ ></a></div>

and the results were right on for what I'm trying to acomplish with the
borders etc. If I create a.hidden to declare visibilty:hidden, outside of
the above DIV, using:

<a class="hidden" href ~etc~ > in any manner, my borders disappear on the
"nextnav" scenerio! The only way I got around it was by grouping a dummy ID
selector to the #nextnav rule:

#nextnav,
#whatever
{width:77px;
height:22px;
border:2px;
border-color:rgb(60,60,60);
border-style:groove;
}

I noticed that my borders came back BEFORE I applied the #whatever selector
to anything. It has no purpose.

Now, my terminology might be wrong in this post but I think you can see
what I'm saying. My two questions are what the hell did I do to make it
work AND is this a "safe" or "clean" way to accomplish what I did?

 

[Toby Inkster]

span.hidden {
font-size:0%;
font-weight:light;
font-style:italic;
line-height: .1px;
}

Better:

span.hidden {
display: block;
height: 1px;
width: 1px;
overflow: hidden;
position: relative;
left: -999em;
}

 

[MaggieMagill]

Better:

span.hidden {
display: block;
height: 1px;
width: 1px;
overflow: hidden;
position: relative;
left: -999em;
}

Thanks for the response. I used tried your clean-up on the "span.hidden"
but it still seems to strip my borders out if I remove that one "dummy" ID.

Why would grouping a second dummy ID, that is not even used, into the rule
that creates my border keep the border from breaking?

I've stripped out everything from the CSS and the html file except the
things relevant to one instance (there are 2 or 3 used) of the rollover
graphic button for my own clarity. I also thought perhaps I was "over-
coding" the issue and hiding the fault with other things but, no. I could
post the html file in full here, but not as a link, if that would help.

I just don't get why having an extra "dummy" ID in that one rule makes or
breaks the borders. I was pretty pleased with myself for getting around the
different translations of border+padding+graphic size in this thing and
getting equal rendering in 3 different browsers until this. I mean it works
and seems to validate as a seperate CSS file and html file but why do I
need it for it to work when it does nothing (as far as being used)?

 

[MaggieMagill]

This is a stripped down version of the problem I'm addressing. It's not
really a problem, per se, but there is an used ID (#offsee) in it that when
removed breaks the borders in FireFox & Opera and not IE. I would like to
understand why that happens and, of course, remove any not needed code.
-------------------------------------------->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
body {background:silver;}
p {text-align:center}
span.hidden {display:block; width:1px; height:1px;overflow:hidden
;position:relative;left:-999em}

a.hidden
{font-size:0%;
color:silver;
font-weight:lighter;
font-style:italic;
text-align:right;
line-height:.1px;
visibility:hidden;
text-decoration:none}

a.next, a:visited.next
{display: block;
width:77px;
height:22px;
background-color:transparent;
background-image: url(next_b.gif);
text-decoration: none;}
a:hover.next
{display: block;
background-color:transparent;
background-image: url(next.gif);
text-decoration: none;}
#content
{position:absolute;
left:50%;
width:800px;
margin-top:15px;
margin-left:-400px;
text-align:center;
padding: 27px 15px 20px;
border:4px groove #333;
background: url(whitebrk.gif);}
#left {width:340px; float:left;border:1px dashed #333;}
#right {width:330px; float:right;border:1px dashed #333;}
#nextnav,
#offsee
{width:77px;
height:22px;
border:2px;
border-color:rgb(204,204,204);
border-style:groove;}
</style>
</head>
<body>
<div id="content">
<div id="logo"><br></div>
<br>
<center>
<div id="nextnav">
<a class="next" href="nextpage.html" title="Next"><span
class="hidden">next</span></a></div>
</center>
<!-- <div><a class="hidden" href="products/tshirtsoon52c.htm"
title="Next">next</a></div> -->
<br><br>
<div id="left"><br>Removing the "#offsee" ID from the style breaks my
borders that are used in the "#nextnav" ID.<br> "#offsee" has no use
anywhere. The method that I use for the borders is the only way I got
around the border+padding render issues of IE and FireFox/Opera.<br><br>I
don't know why I need the "#offsee" ID in the code!<br><br><br></div>
<div id="right"><br>The problem is that, stripped of style, there is no
available link to be used as the nav-link resides inside the "a class" used
for the graphic-based rollover. If the user agent is viewing sans style
there is no nav-link available for the user to use.<br><br> Hiding a nav
link seemed sensible.<br></div>
</div></body>
</html>