PDA

View Full Version : using text-decoration: none in a weird situation



canadianjameson
Sep 3rd, 2004, 09:09 PM
hey, i'm trying to use text-decoration:none in an odd situation. i have a js scriplet to hide an e-mail address on a page (sort of). i want to remove the underline on the resulting output but i'm having trouble.

the js code is


<script language="JavaScript">
<!--
var name = "blahblah";
var domain = "yoohoo.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// -->
</script>


and the css code i'm using to do so is


<style type="text/css" media="print">
#notUnderlined { text-decoration: none}

i tried using a <div>, as seen below. I also tried putting it in the <td>, but to no avail. how do i do this?


<head>
<style type="text/css" media="print">
#notUnderlined { text-decoration: none}
.notPrinted { display: none; }
.static-box { display: block }
#bottomMiddle {
position: absolute;
margin-left: 40%;
bottom: 0px;
page-break-after:always; }
</style>

<style type="text/css" media="screen, projection">
.notPrinted { display: block }
.static-box { display: none }
#bottomMiddle {
position: absolute;
margin-left: 40%;
bottom: 0px;
page-break-after:always; }
</style>
</head>

<body>
....

<p id="bottomMiddle" class="static-box">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><font size="-1">Enviromark Inc.<br>
<div id="notUnderlined">
<script language="JavaScript">
<!--
var name = "blahblah";
var domain = "yoohoo.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// -->
</script>
</div>
<br>
www.enviromark.ca</font></td>
</tr>
</table>
</p>



hmmm says i

mcdougals4all
Sep 3rd, 2004, 09:20 PM
You need to apply it directly to the anchor tag. You should be able to do this by moving your id inside the first document.write line.

You'll also want to define the styles for the different link states as appropriate.

Here they're all using the same rule. Define separate rules if you'd like something different on hover or after being visited.

#notUnderlined:link, #notUnderlined:visited, #notUnderlined:hover { text-decoration: none}

liorean
Sep 3rd, 2004, 09:25 PM
Text decorations are specified on a per-element level and doesn't inherit. Thus, if you have an element with red colour that specifies a text decoration, but in the middle of that element have another element with blue colour that specifies no text decoration, the red text decoration of the parent element will still be rendered under the blue text of the child element. That means that you must set text-decoration: none; on the element that has the text decoration, not a surrounding or a contained element.

In this case, the a element.

canadianjameson
Sep 3rd, 2004, 11:03 PM
my brain hurts:

basically what was suggested was:

instead of


#notUnderlined:link, #notUnderlined:visited, #notUnderlined:hover { text-decoration: none}


you suggest (please correct my syntax)


#notUnderlined a. {
text-decoration:none }


and i put this id tag in my write statement like so:


<script language="JavaScript">
<!--
var name = "blahblah";
var domain = "yoohoo.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">' id="notUnderlined");
document.write(name + '@' + domain + '</a>');
// -->
</script>


i'm sure my syntax is off :)

Antoniohawk
Sep 3rd, 2004, 11:07 PM
Yeah, just without the a..

#notUnderlined {
text-decoration: none;
}

canadianjameson
Sep 3rd, 2004, 11:51 PM
was my id"" placement actually right?

mindlessLemming
Sep 4th, 2004, 12:44 AM
was my id"" placement actually right?
NO! :eek:

Lets try that again ;)


document.write('<a href=\"mailto:' + name + '@' + domain + '\"' + 'id=\"notUnderlined\">' );
document.write(name + '@' + domain + '</a>');


Although why not use a class instead of an id, just incase you want to do it more than once on a single page.

Willy Duitt
Sep 4th, 2004, 07:33 AM
Why not apply the style directly to the anchor:

document.write('<a href="mailto:' +name+ '@' +domain+ '"style="text-decoration:none">');

.....Willy

ReadMe.txt
Sep 4th, 2004, 01:35 PM
i believe you were after
#notUnderlined a{
text-decoration: none;
}

which is what liorean was suggesting

canadianjameson
Sep 4th, 2004, 04:23 PM
i was. but it works none the less.

AHHHHHH LEMMINGS!

hehe thanks bud, works like a charm!

now all i need is a script to calculate the height of a table... hmmm says i

mindlessLemming
Sep 5th, 2004, 01:35 AM
AHHHHHH LEMMINGS!

hehe thanks bud, works like a charm!

now all i need is a script to calculate the height of a table... hmmm says i
No probs mate :)

..as for the second one..


document.getElementById('myTable').style.height

I'm a total JS drop-kick, but I think that's it ;)

canadianjameson
Sep 11th, 2004, 04:16 PM
sweet & sexy. i love it