PDA

View Full Version : Borders & Text-decoration



SYMBIO
Feb 20th, 2003, 12:51 PM
for some reason when i use a border, the top border doesnt appear, but the other 3 do work. i adjusted the table cell to see if it was anything to do with the td height...but it isnt...

so i did something (in my book) quite clever i used an overline feature....text decoration.

but i have a problem. the overline is the same colour as the text. so i guess my question is:

is there a way of changing the text decoration colour in CSS?

i have tried "text-decoration-color: green;" but no worky.

please help!

ronaldb66
Feb 20th, 2003, 01:17 PM
Your overline trick is just an attemp to avoid the original problem; overline is part of text and therefore has the same color, controlled by the "color" property; there's no such property as "text-decoration-color".
It shouldn't be any problem to set a border at the top of an element; if you don't succeed, something else is wrong.
Can you supply the code you used? Otherwise it's practically impossible to give proper advice.

SYMBIO
Feb 20th, 2003, 01:22 PM
a.fancy:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-color: red;
color: blue;
text-decoration: overline;
text-decoration-color: green;
background-color: #ffffff;
border: thin double gold;
/*
border-style: solid;
border-color: gold;
border-bottom-width: 1px;
border-top-width: 2px; // used 1px previously...no worky
border-right-width: 1px;
border-left-width: 1px;
*/
}


a.fancy:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-color: red;
color: blue;
text-decoration: overline;
text-decoration-color: green;
background-color: #ffffff;
border: thin double gold;
}
a.fancy:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-color: red;
color: blue;
text-decoration: overline;
decoration-color: green;
background-color: lightblue;
border: thin double gold;
}
a.fancy:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-color: red;
color: green;
text-decoration: blink;
background-color: lightblue;
border: thin double gold;
}

pb&j
Feb 20th, 2003, 03:37 PM
Perhaps this may work for you...
border-top:1px solid green;

instead of this...
text-decoration: overline;
text-decoration-color: green;

ronaldb66
Feb 20th, 2003, 04:38 PM
I tried your CSS, and with some minor adjustments i had no problem seeing a green top border (there's no accounting for taste).
I can't see any problems in the styles you used, although they can be more efficient, so my best guess is your page code is the culprate; could you supply this as well?
Ah, very funny: i tried a table cell around the link, and lo and behold: disappearo toppo bordero!
I tried non-breaking spaces before and after: border came back.
I tried cellpadding="4"; border came back, right up against the table border.
With cellpadding="5" there's a small gap between the table border and the link border.

Ergo: must be a table rendering hick-up; I used IE 5.5 in WinNT, maybe other browsers react differently.

Quiet Storm
Feb 20th, 2003, 10:43 PM
Hey SYMBIO,

Are you having these problems on IE6?

Have you checked it on IE5.0, or IE5.5?

I've had similar problems with borders like that, but only on IE6....

SYMBIO
Feb 21st, 2003, 10:25 AM
<table width="700" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><h1>News BackOffice</h1></td>
</tr>
<!--tr>
<td colspan="2"><div>You are logged in as <span class="username"><%=session("username")%></span></div></td>
</tr>
<tr>
<td height="2" colspan="2">&nbsp;</td>
</tr-->
<tr>
<td height="20" class="three"> &nbsp; <a class="fancy" href="#" onclick="javascript:history.back()">&nbsp;&nbsp;Back&nbsp;&nbsp;</a></td>
<td height="20" class="two"> &nbsp; <a class="fancy" href="home.asp">&nbsp;&nbsp;Home&nbsp;&nbsp</a></td>
</tr>
</table>


thats my html for it...it is an include file...sorry about the colors theyre just there because theyre easy to type rather than the hex colours. what else? oh yeah....i'm using IE6.0.2800.

damn microsoft browser! i think its weird how the macintosh version of the browser renders it properly. i cant get opera and netscpe 6 configured to this intranet page.

oh well.

cheers anyway.

meow
Feb 21st, 2003, 11:44 AM
Just for the record, there are no properties called font-color and text-decoration-color.

You can have an underline or overline in another color than the text but not in IE. 'text-decoration' continues through all child elements so this gives blue text with a red underline in Moz and Opera:

p { color: red; text-decoration: underline }
p span { color: blue }

<p>
<span>Yadda yadda...</span></p>