Link Troubles

Sent by Tom Livingston on 31 March 2004 22:10

Hello all,

I am having troubles with an HREF that is wrapping onto multiple lines. 
If I leave it as an inline element, only the first line of the HREF 
honors the padding applied. I got around this by applying 
display:block; to the hrefs. This fixed my indent problem, however the 
entire width of the TD that the link is in is "clickable" and triggers 
the applied hover, *even though you might not be over any link text*. 
In other words the link text isn't the full width of the TD, but the 
full width of the TD is still clickable. I cannot apply a width because 
the link is data-driven and I have no way to know the width all the 
time. Make sense?

Code:

/* --- HOME PAGE --- */
..news{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#666;
	padding:0;
	margin:0;
	}
	
a.news{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#666;
	padding:4px;
	margin:0;
	text-decoration: none;
	display:block;
	}
	
a.news:hover{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#666;
	padding:4px;
	margin:0;
	text-decoration: underline;
	display:block;
	}
	
..spotlight{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#666;
	padding:0;
	margin:0;
	}
	
a.spotlight{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#666;
	padding:4px;
	margin:0px;
	text-decoration: none;
	display:block;
	}
	
a.spotlight:hover{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#666;
	padding:4px;
	margin:0;
	text-decoration: underline;
	display:block;
	}
	
a.morespotlight{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000;
	font-weight:bold;
	padding:4px;
	text-decoration: none;
	}

a.morespotlight:hover{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000;
	font-weight:bold;
	padding:4px;
	text-decoration: underline;
	}
/* --- END HOME PAGE --- */


<td width="433" height="91" align="left" valign="top" bgcolor="#D6E6EA" 
class="news">
	<cfoutput>
		<a href="javascript:void(0);" 
onClick="viewDetails(#breakingNews.Press_Release_ID#)" 
class="news">#breakingNews.Press_Release_Headline#</a
	</cfoutput>
	<span class="morespotlight"><a href="news/press.cfm" 
class="morespotlight">MORE HEADLINES</a> &raquo;</span>
</td>

....and...

<td width="228" height="91" align="left" valign="top" bgcolor="#D6E6EA" 
class="spotlight">
	<cfoutput>
		<a href="#spotlight.Spotlight_URL#" 
class="spotlight">#spotlight.Spotlight_Copy#</a>
	</cfoutput>
	<span class="morespotlight"><a href="#" class="morespotlight">LEARN 
MORE</a> &raquo;</span>
</td>
<td width="56" align="left" bgcolor="#D6E6EA" valign="top">
	<cfoutput>
		<a href="#spotlight.Spotlight_URL#"><img 
src="images/home/#spotlight.Spotlight_File_Name#" alt="" width="56" 
height="68" border="0"></a><br>
	</cfoutput>
</td>

--
Tom Livingston
Senior Multimedia Artist
Media Logic
mlinc.com


______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/