Topic: invisible visible text? heh.... Pages that link to <a href="https://ozoneasylum.com/backlink?for=11181" title="Pages that link to Topic: invisible visible text? heh...." rel="nofollow" >Topic: invisible visible text? heh....\

 
Author Thread
mas
Paranoid (IV) Inmate

From: the space between us
Insane since: Sep 2002

IP logged posted posted 04-01-2004 18:48 Edit Quote

hello inmates!
no, no april1 joke or something
i have a question concerning CSS: on my site, http://www.thespacebetweenus.com, I have a navigation that uses an UL and CSS image rollovers for the navigation. the problem: the links are empty a href tags, so on a normal browser, the background image of the a href tags gets displayed.
but on a browser of a mobile phone, which doesn't display any background images, a navigation without any links comes up. (because the tags are empty)
so i would need the link text in my href tags which should only be displayed in a browser that skips the background images.
any ideas? i would suggest having a look on the site to understand the problem better.
thanks in advance

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 04-01-2004 19:06 Edit Quote

try this or one of the many other image replacement techniques out there

mas
Paranoid (IV) Inmate

From: the space between us
Insane since: Sep 2002

IP logged posted posted 04-01-2004 19:29 Edit Quote

thank you very very much. i will try that out

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 04-01-2004 20:32 Edit Quote

In the interest of sharing, I'm gonna put up a little bit here about my favorite image replacement technique. I do not claim this as my own. As far as I can tell, the link I posted above points to the guru genious who came up with the idea.

The idea is like this. You wanna show some highly stylized text in place of your strictly marked-up text. CSS can't do what you want. You can't depend on user on the other end having that 'perfect' font you want...using <img> for text is VERY unusable...what's a guy to do?

You apply a background image to your properly marked-up XHTML!
Make your image, let's say a title. Note its size. Let's pretend 100px tall.
Add that to your stylesheet.

code:
<style type='text/css'>
h1{
background:transparent url(fancyH1.png) center center no-repeat;
}
......
<body>
<h1>Regular Title</h1>


Hey! Now we have the image AND the text. Make that text go away.

OK. Add some padding to the h1 in the stylesheet. Make your padding equivalent to the size of the image. While you're at it, change the height of the image to 0.

code:
<style type='text/css'>
h1{
padding-top:100px;
height:0;
background:transparent url(fancyH1.png) center center no-repeat;
overflow:hidden;
}
......
<body>
<h1>Regular Title</h1>


This technique works wonderfully on modern browsers that implement the box model properly. Unfortunately, the browser with the marketshare doesn't fit that description.
Time for the ol' Tantek box model hack...

code:
<style type='text/css'>
h1{
padding-top:100px;
height:100px;
background:transparent url(fancyH1.png) center center no-repeat;
overflow:hidden;
voice-family: "\"}\"";
voice-family:inherit;
height:0;
}
......
<body>
<h1>Regular Title</h1>


Great!
Uh...now it's broken in Opera...1 more change.

code:
<style type='text/css'>
h1{
padding-top:100px;
height:100px;
background:transparent url(fancyH1.png) center center no-repeat;
overflow:hidden;
voice-family: "\"}\"";
voice-family:inherit;
height:0;
}
html>body h1{
height:0;
}
......
<body>
<h1>Regular Title</h1>



There you have it. One perfectly pretty title. One uberly-usable document.

Resources:
image replacement
box model hack

[This message has been edited by mobrul (edited 04-01-2004).]



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu