Ok this should be an easy one. I have a <td> in which i want to swap bg
colors and font colors when the user mouses-over the TD and not just the link text. It works perfectly in the first TD, but in the second one it only works when you mouse over the link text.
Why would it do that?!?!?!?
<style type="text/css">
table.LinkThing td a {
display: block;
text-decoration: none;
background-color: #BEB778;
color: #323E3E;
}
table.LinkThing td a:hover {
background-color: #323E3E;
color: #BEB778;
}
</style>
<body>
<table border="1" class="LinkThing">
<tr>
<td class="LinkThing"><a href=http://www.webdeveloper.com/forum/archive/index.php/"bar"><br><br>Bar<br><br></a></td>
<td class="LinkThing"><a href=http://www.webdeveloper.com/forum/archive/index.php/"foo"><br><br>Foo<br><br></a></td>
</tr>
</table>I don't see code to make it work in the first <td>.
Why tables for layout is stupid (<!-- m --><a class="postlink" href="http://www.hotdesign.com/seybold/index.html">http://www.hotdesign.com/seybold/index.html</a><!-- m -->)
Why avoiding tables (for layout) is important (<!-- m --><a class="postlink" href="http://davespicks.com/essays/notables.html">http://davespicks.com/essays/notables.html</a><!-- m -->)
<!-- m --><a class="postlink" href="http://www.workingwith.me.uk/tablefree/why/">http://www.workingwith.me.uk/tablefree/why/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.sitepoint.com/article/tables-vs-css/">http://www.sitepoint.com/article/tables-vs-css/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html">http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/house/good_oil/dead_layout/Here">http://www.westciv.com/style_master/hou ... ayout/Here</a><!-- m --> is one that I use, and if you go here (<!-- m --><a class="postlink" href="http://webtoolz.t35.com/html/">http://webtoolz.t35.com/html/</a><!-- m -->) and scroll to the bottom of the page, there will be a preview.
The CSS
#subfooterleft {
background-color: #007439;
white-space: nowrap;
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 1;
float:left;
padding-top: 8px;
padding-bottom: 8px;
}
#subfooterleft a {
padding-left: 183px;
padding-right: 183px;
background-color: #007439;
padding-top: 10px;
padding-bottom: 10px;
}
#subfooterleft a:hover {
background-color: #008341;
text-decoration: underline;
}
#subfooterright {
background-color: #007439;
white-space: nowrap;
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 1;
float:right;
padding-top: 8px;
padding-bottom: 8px;
}
#subfooterright a {
padding-left: 183px;
padding-right: 183px;
background-color: #007439;
padding-top: 10px;
padding-bottom: 10px;
}
#subfooterright a:hover {
background-color: #008341;
text-decoration: underline;
}
The HTML
<span id="subfooterleft"><a class="move" href=http://www.webdeveloper.com/forum/archive/index.php/"http://webtoolz.t35.com/">Pevious</a></span>
<span id="subfooterright"><a class="move" href=http://www.webdeveloper.com/forum/archive/index.php/"tips.php">Next</a></span>
colors and font colors when the user mouses-over the TD and not just the link text. It works perfectly in the first TD, but in the second one it only works when you mouse over the link text.
Why would it do that?!?!?!?
<style type="text/css">
table.LinkThing td a {
display: block;
text-decoration: none;
background-color: #BEB778;
color: #323E3E;
}
table.LinkThing td a:hover {
background-color: #323E3E;
color: #BEB778;
}
</style>
<body>
<table border="1" class="LinkThing">
<tr>
<td class="LinkThing"><a href=http://www.webdeveloper.com/forum/archive/index.php/"bar"><br><br>Bar<br><br></a></td>
<td class="LinkThing"><a href=http://www.webdeveloper.com/forum/archive/index.php/"foo"><br><br>Foo<br><br></a></td>
</tr>
</table>I don't see code to make it work in the first <td>.
Why tables for layout is stupid (<!-- m --><a class="postlink" href="http://www.hotdesign.com/seybold/index.html">http://www.hotdesign.com/seybold/index.html</a><!-- m -->)
Why avoiding tables (for layout) is important (<!-- m --><a class="postlink" href="http://davespicks.com/essays/notables.html">http://davespicks.com/essays/notables.html</a><!-- m -->)
<!-- m --><a class="postlink" href="http://www.workingwith.me.uk/tablefree/why/">http://www.workingwith.me.uk/tablefree/why/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.sitepoint.com/article/tables-vs-css/">http://www.sitepoint.com/article/tables-vs-css/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html">http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/house/good_oil/dead_layout/Here">http://www.westciv.com/style_master/hou ... ayout/Here</a><!-- m --> is one that I use, and if you go here (<!-- m --><a class="postlink" href="http://webtoolz.t35.com/html/">http://webtoolz.t35.com/html/</a><!-- m -->) and scroll to the bottom of the page, there will be a preview.
The CSS
#subfooterleft {
background-color: #007439;
white-space: nowrap;
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 1;
float:left;
padding-top: 8px;
padding-bottom: 8px;
}
#subfooterleft a {
padding-left: 183px;
padding-right: 183px;
background-color: #007439;
padding-top: 10px;
padding-bottom: 10px;
}
#subfooterleft a:hover {
background-color: #008341;
text-decoration: underline;
}
#subfooterright {
background-color: #007439;
white-space: nowrap;
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 1;
float:right;
padding-top: 8px;
padding-bottom: 8px;
}
#subfooterright a {
padding-left: 183px;
padding-right: 183px;
background-color: #007439;
padding-top: 10px;
padding-bottom: 10px;
}
#subfooterright a:hover {
background-color: #008341;
text-decoration: underline;
}
The HTML
<span id="subfooterleft"><a class="move" href=http://www.webdeveloper.com/forum/archive/index.php/"http://webtoolz.t35.com/">Pevious</a></span>
<span id="subfooterright"><a class="move" href=http://www.webdeveloper.com/forum/archive/index.php/"tips.php">Next</a></span>