Home › Remove underline decoration with CSS not trivial

Remove underline decoration with CSS not trivial  

James
Joined:
02/21/2009
Posts:
49

November 18, 2009 23:11:48
It turned out the removing the underline decoration from an element is not that trivial. The underline could have been introduced by any containing element up in the DOM tree! Try this page: 
<!doctype html>
<html>
	<head>
		<style type="text/css">
			div.underline,th.underline {
				text-decoration: underline;
			}

			div,th,span {
				font-style: italic;
				text-decoration: none;
			}

			table {
				border-collapse: collapse;
			}

			td,th {
				border: #ddd 1px solid;
				padding: 4px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th class="underline">Column 1</th>
				<th class="underline">
					<span>Column 2</span>&nbsp;&nbsp;<img src="arrow.jpg">
				</th>
			</tr>
			
			<tr>
				<td>Value 11</td>
				<td>Value 12</td>
			</tr>
			
			<tr>
				<td>Value 21</td>
				<td>Value 22</td>
			</tr>
		</table>

		<div class="underline">
			<div>
			<span>Underlined DIV</span>&nbsp;&nbsp;<img src="arrow.jpg">
			</div>
		</div>
	</body>
</html>

[ Comment  | Tags ]