У меня небольшие проблемы с тем, чтобы все эти браузеры вели себя именно так, как я хочу, но клянусь, я уже делал это раньше:
<!html>
<head>
<style type="text/css">
div { width:300px; }
ul { list-style:none; margin:0; padding:0; }
li { margin:0.25em 0.5em 0.25em 0; background:transparent url(http://cdn.iconfinder.net/data/icons/basicset/pencil_16.png) no-repeat scroll 0 0; float:left; }
a { padding-left:24px; }
</style>
</head>
<body>
<div>
<ul>
<li><a href="/">Amazon</a></li>
<li><a href="/">Barnes & Noble</a></li>
<li><a href="/">Books-A-Million</a></li>
<li><a href="/">Borders</a></li>
<li><a href="/">Indie Bound</a></li>
<li><a href="/">Powell's</a></li>
</ul>
</div>
</body>
В большинстве современных браузеров это выглядит прекрасно, ноно в IE 6 и 7 ссылка "Books-A-Million" переносится.
Я бы хотел, чтобы элементы списка имели переменную ширину и перенос в новые строки, но ссылки внутри не переносились.Я не могу понять волшебную комбинацию типов отображения и взломов браузера CSS, чтобы заставить это работать.Кто-нибудь занимался этой проблемой раньше?