Getting an issue that I am solely experiencing in Chrome. Not sure if
it backtracks to older versions, I am too lazy to down-grade. I am
currently using 6.0.447.0
When I refresh the page, the rendering sometimes changes, here are two
screenshots for comparison:
Refresh 1 -
http://bit.ly/9DDYut
Refresh 2 -
http://bit.ly/9AxsVV
There is quite a lot of CSS, but basically I had to create multi-line
links. It works fine in all other browsers, including IE6.
/*CSS*/
ul{width: 100%; font-size: 120%; font-weight: bold; margin: 0 0 0 0;}
ul li{margin: 20px 0;border-top: 1px solid #dee0e0; border-bottom: 1px
solid #dee0e0; background-image:url('../img/transport_arrow.gif');
background-position: 0 3px; background-repeat: no-repeat;}
ul li a{color: #7d7d7d; text-decoration: none; padding: 0 0 0 20px; }
ul li a:hover, ul li a:hover .grey{color:#ff4813;}
ul li:hover{background-position: 0 -92px;}
ul li a .grey{color: #c8cbcc;}
ul li a .block3{display: block; padding: 0 20px; width: 240px; border-
top: 1px solid #dee0e0; border-bottom: 1px solid #dee0e0;}
ul li a .block2{display: block; padding: 0 20px; width: 240px; border-
top: 1px solid #dee0e0;}
ul li a .margin{margin: 0 0 0 20px;}
<!--HTML-->
<ul>
<li>
<a href="#">Tottenham Court Road
<span class="block3">Underground Station</span>
<span class="grey margin">100m/02mins</span>
</a>
</li>
<li>
<a href="#">Soho Square
<span class="grey block2">150m/03mins</span>
</a>
</li>
<li>
<a href="#">The British Museum
<span class="grey block2">300m/05mins</span>
</a>
</li>
<li>
<a href="#">Covent Garden Market
<span class="grey block2">500m/08mins</span>
</a>
</li>
</ul>