Topic: invisible visible text? heh.... (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11181" title="Pages that link to Topic: invisible visible text? heh.... (Page 1 of 1)" rel="nofollow" >Topic: invisible visible text? heh.... <span class="small">(Page 1 of 1)</span>\$

mas Paranoid (IV) Inmate From: the space between us Insane since: Sep 2002	posted 04-01-2004 18:48 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	posted 04-01-2004 19:06 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	posted 04-01-2004 19:29 thank you very very much. i will try that out
mobrul Bipolar (III) Inmate From: Insane since: Aug 2000	posted 04-01-2004 20:32 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).]

Topic: invisible visible text? heh.... (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11181" title="Pages that link to Topic: invisible visible text? heh.... (Page 1 of 1)" rel="nofollow" >Topic: invisible visible text? heh.... <span class="small">(Page 1 of 1)</span>\$

mas
Paranoid (IV) Inmate

From: the space between us
Insane since: Sep 2002

posted 04-01-2004 18:48

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

posted 04-01-2004 19:06

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

posted 04-01-2004 19:29

thank you very very much. i will try that out

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

posted 04-01-2004 20:32

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:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: invisible visible text? heh.... (Page 1 of 1)

Insert Slimies »

Insert UBB Code »