Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title>Link Tests</title>
<style type="text/css">
div#linkLists {font: 12px Arial, Verdana, sans-serif;
text-align: center; width: 40%; margin-left: auto; margin-right: auto;}
div#linkLists a {display: block; white-space: nowrap; padding: .25em; float: left; margin: 5px;}
div#linkLists a:hover {background: #b0c8df; color: #000066; border: 1px solid blue; margin: 4px;}
div.clearer {clear: left; line-height: 0; height: 0;}
</style>
</head>
<body>
<div id="linkLists">
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<div class="clearer"> </div>
</div>
</body>
</html>
Removing "display: block;" fixed it for me, however the width has changed. May be a clue there in some way.
Thanks! Actually there was a clue. I just realized that any floated element automatically generates a block box. So my display: block rule is redundant.
