<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Ben Huson &#187; Bug</title>
	<atom:link href="http://www.benhuson.co.uk/tag/bug/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.benhuson.co.uk</link>
	<description>Web Designer and Developer</description>
	<lastBuildDate>Mon, 06 Feb 2012 14:41:55 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>CSS Bugs: Fix for IE / Win gap between list items</title>
		<link>http://www.benhuson.co.uk/2006/02/21/css_bugs_fix_for_ie_win_gap_between_list_items/</link>
		<comments>http://www.benhuson.co.uk/2006/02/21/css_bugs_fix_for_ie_win_gap_between_list_items/#comments</comments>
		<pubDate>Tue, 21 Feb 2006 14:42:22 +0000</pubDate>
		<dc:creator>Ben</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Bug]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Internet Explorer]]></category>
		<category><![CDATA[List]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://www.benhuson.com/?p=105</guid>
		<description><![CDATA[Tweet Recently I stumbled across the annoying IE/Win bug of gaps between vertically stacked list items. After searching around for a while I found a fair few fixes. However, none of these seemed to work for me. The only different I could find was that my list contained images where the other examples were purely [...]]]></description>
			<content:encoded><![CDATA[
<!-- This is the start of the WP Twitter Button code -->
<div id="rk_wp_twitter_button" style="margin: 0px 0px 0px 0px; float: left"><a href="http://redirectingat.com?id=3206X604054&xs=1&url=http%3A%2F%2Ftwitter.com%2Fshare&sref=rss" class="twitter-share-button" data-url="http://www.benhuson.co.uk/2006/02/21/css_bugs_fix_for_ie_win_gap_between_list_items/" data-count="horizontal" data-via="benhuson">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<!-- This is the end of the WP Twitter Button code -->

 
<span class = "facebook-like" style = "height: 25px;  "><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.benhuson.co.uk/2006/02/21/css_bugs_fix_for_ie_win_gap_between_list_items/&layout=button_count&send=false&show_faces=false&width=&action=like&colorscheme=light&font=lucida grande" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:px; height:25px"></iframe></span><p>Recently I stumbled across the annoying IE/Win bug of gaps between vertically stacked list items.</p>
<p>After searching around for a while I found a fair few fixes. However, none of these seemed to work for me. The only different I could find was that my list contained images where the other examples were purely text.</p>
<p>I fixed the bug by chance whilst implementing a fix by John Serris at <a href="http://redirectingat.com?id=3206X604054&xs=1&url=http%3A%2F%2Fphonophunk.com%2Farticles%2Fie-fix-for-gaps-between-list-items.php&sref=rss" target="_blank">www.phonophunk.com</a>.</p>
<p>It turned out that when using the <strong>&#8220;vertical-align: bottom&#8221;</strong> fix applied to the list item tag, I also needed to apply it to the &#8216;a&#8217; and &#8216;img&#8217; tags as well:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#navsec</span> a<span style="color: #00AA00;">,</span> <span style="color: #cc00cc;">#navsec</span> img <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre></div></div>

<p><span id="more-105"></span></p>
<p><script src="http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&amp;MarketPlace=GB&amp;ID=V20070822/GB/thewhiteroo0a-21/8001/9418bc02-30a0-44f9-b00e-f397382cc329" type="text/javascript"></script></p>
<p> </p>
<p> </p>
<p><noscript><a href="http://redirectingat.com?id=3206X604054&xs=1&url=http%3A%2F%2Fws.amazon.co.uk%2Fwidgets%2Fq%3FServiceVersion%3D20070822%26amp%3BMarketPlace%3DGB%26amp%3BID%3DV20070822%252FGB%252Fthewhiteroo0a-21%252F8001%252F9418bc02-30a0-44f9-b00e-f397382cc329%26amp%3BOperation%3DNoScript&sref=rss">Amazon.co.uk Widgets</a></noscript></p>
]]></content:encoded>
			<wfw:commentRss>http://www.benhuson.co.uk/2006/02/21/css_bugs_fix_for_ie_win_gap_between_list_items/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

