Clear/transparent text?

Discussion in 'HTML' started by MaggieMagill, Mar 12, 2005.

  1. MaggieMagill

    MaggieMagill Guest

    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, Mar 12, 2005
    #1
    1. Advertising

  2. MaggieMagill

    MaggieMagill Guest

    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?
    MaggieMagill, Mar 12, 2005
    #2
    1. Advertising

  3. MaggieMagill

    Toby Inkster Guest

    MaggieMagill wrote:

    > 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;
    }

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Mar 12, 2005
    #3
  4. MaggieMagill

    MaggieMagill Guest

    Toby Inkster <> wrote in
    news:p:

    > MaggieMagill wrote:
    >
    >> 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;
    > }
    >


    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, Mar 12, 2005
    #4
  5. MaggieMagill

    MaggieMagill Guest

    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>
    MaggieMagill, Mar 14, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John Perks and Sarah Mount

    wxPython OGL: How make LineShape text b/g transparent?

    John Perks and Sarah Mount, Apr 15, 2005, in forum: Python
    Replies:
    0
    Views:
    476
    John Perks and Sarah Mount
    Apr 15, 2005
  2. aljosa
    Replies:
    1
    Views:
    793
    tac-tics
    Jul 19, 2006
  3. David

    Response.Clear() doesn't clear

    David, Jan 31, 2008, in forum: ASP .Net
    Replies:
    2
    Views:
    1,015
    Mark Fitzpatrick
    Jan 31, 2008
  4. InvalidLastName

    Unrecognized element 'add' after <clear></clear>

    InvalidLastName, Feb 26, 2007, in forum: ASP .Net Web Services
    Replies:
    3
    Views:
    945
    Steven Cheng[MSFT]
    Mar 6, 2007
  5. dc
    Replies:
    1
    Views:
    209
    Timothy Hunter
    Jan 27, 2007
Loading...

Share This Page