I have a wierd ie7 bug. Its easier to see what im talking about instead of trying to say it.
Take a look here. It works in IE6, Opera, FF, and Safari. I have kind of narrowed it down a bit. The height of the date area determines the part of the image that is shown. Heres the html for the area
PHP Code:
<li>
<span>
<div class="guide">
<div id="guide1">
<h7>0</h7>
</div>
<h6>Soon to Come</h6>
</div>
<p>
<a href="http://www.osguide.net/hdl.php?p=36" target="_blank">
<h2>1. FileZilla - 3.0.7.1</h2>
</a>
<img src="http://www.osguide.net/images/software/filezilla.jpg" width="34px" height="34px" alt="FileZilla" align="left" />
<b>Added: 2008-01-14 | Last Update: 2008-02-20</b>
<br /><em>Windows</em> » <em>Linux</em> » <em>Mac</em> » <em>Internet</em>
</p>
<p><br />FileZilla Client...<br /></p>
<p><br />
<strong>Clicks</strong>: 21 |
<strong>License</strong>: GPL
</p>
</span>
</li>
and the css for this section
Code:
.programList ul {list-style:none; display:block; font-size:10px;}
.programList li {border-bottom:1px solid #f2f2f2; background-color:#DFDFDF; font-size:10px; color:#666; text-decoration:none;}
.programList h2{ font-size:14px; color:#666; text-decoration: none; font-weight:bold; padding:7px 0 3px 0; }
.programList img{ padding:0 2px; background-color:#DFDFDF; border:2px solid #DFDFDF; height:34px; width:34px; float:left;}
.programList a {font-size:10px; color:#666666; text-decoration:none;}
.programList em {font-size:12px; color:#666;}
.programList span{ outline:none; background-color:#DFDFDF; text-decoration:none; display:block; padding:0px 15px 10px 15px; border-bottom:1px solid #CCCCCC; color:#999; font-size:12px;}
.programList span p {margin-left:69px; display:block;}
.programList span b {font-size:10px; color:#999999; font-weight:normal; position:relative; line-height:1.75;}
/*.programList span b img {border:0;}*/
.programList span:hover { background-color:#EEEEEE; border-bottom:1px solid #BBB;color:#444;text-decoration:none;}
.programList span:hover h2 { color:#0099CC; background-color:#EEEEEE; }
.programList span:hover a {color:#0099CC; background-color:#EEE; }
.programList span:hover img { background-color:#EEEEEE; border:2px solid #EEEEEE; min-height:34px; height:34px; width:34px; }
.programList span:hover em {color:#FF9900;}
.programList span:hover b {font-size:10px; font-weight:normal; color:#0099CC; line-height:1.75; }
.guide { width:69px; text-align:center; display:block; float:left; padding:15px 0 15px 0; }
.guide h7 { display:block; font-size:24px; color:#FF9900;}
.guide h6 { display:block; cursor:hand; font-size:12px; margin-top:5px; color:#666;}
Any ideas what could be causing this?