Major IE8 bug, need help (w/ screencast)

[n1c0_ds]

My website works absolutely fine, but for some reason, this bug happens in IE8. I also attached the source behind this.

http://www.screencast-o-matic.com/watch/c6nFY31cp


I don't understand how this can happen since it's exactly the same div generated by a PHP script.


<div class='record'>
<div class='title'><a title='View this record' href='showitem.php?id=15'>Title (preview) </a><span id='version'>1.12</div>
<div class='author'>by <a title='More submissions by Nicolas Bouliane 'href='catalog.php?author=1'>Nicolas Bouliane</a></div>
<div class='lastupdate'>2010-02-14</div>
<div class='shortdesc'>SHORTIE</div>
</div>

<div class='record'>
<div class='title'><a title='View this record' href='showitem.php?id=14'>Title (preview) </a><span id='version'>1.12</div>
<div class='author'>by <a title='More submissions by Nicolas Bouliane 'href='catalog.php?author=1'>Nicolas Bouliane</a></div>
<div class='lastupdate'>2010-02-14</div>
<div class='shortdesc'>SHORTIE</div>
</div>

<div class='record'>
<div class='title'><a title='View this record' href='showitem.php?id=13'>Title (preview) </a><span id='version'>1.12</div>
<div class='author'>by <a title='More submissions by Nicolas Bouliane 'href='catalog.php?author=1'>Nicolas Bouliane</a></div>
<div class='lastupdate'>2010-02-14</div>
<div class='shortdesc'>SHORTIE</div>
</div>

<div class='record'>
<div class='title'><a title='View this record' href='showitem.php?id=12'>Title (preview) </a><span id='version'>1.12</div>
<div class='author'>by <a title='More submissions by Nicolas Bouliane 'href='catalog.php?author=1'>Nicolas Bouliane</a></div>
<div class='lastupdate'>2010-02-14</div>
<div class='shortdesc'>SHORTIE</div>
</div>

<div class='record'>
<div class='title'><a title='View this record' href='showitem.php?id=11'>Title (preview) </a><span id='version'>1.12</div>
<div class='author'>by <a title='More submissions by Nicolas Bouliane 'href='catalog.php?author=1'>Nicolas Bouliane</a></div>
<div class='lastupdate'>2010-02-14</div>
<div class='shortdesc'>SHORTIE</div>
</div>



As generated by:


for ($counter = 0; $counter<$length; $counter++){
$record = mysql_fetch_array($data);

if ($record){
echo("
<div class='record'>
<div class='title'><a title='View this record' href='showitem.php?id=" . $record['id'] . "'>" . $record['title'] . " </a><span id='version'>" . $record['version'] . "</div>
<div class='author'>by <a title='More submissions by " . $record['name'] . " 'href='catalog.php?author=" . $record['author_ID'] . "'>" . $record['name'] . "</a></div>
<div class='lastupdate'>" . $record['lastupdate'] . "</div>
<div class='shortdesc'>" . $record['shortdesc'] . "</div>
</div>
");
}
else{
break;
}
}

And the CSS:


.record {
position:relative;
margin:5;
padding:4;
padding-bottom:18;
border:1px solid #CCC;
}

.title {
margin-bottom:5;
width:100%;
font-size:20;
}
.title a{
color:#00C;
}
.title a:hover{
color:#55F;
}

.shortdesc{
padding-left:5;
padding-right:5;
color:#333;
position:relative;
}

.version {
color:#aaa;
font-size:10;
}



HOW IS THIS EVEN POSSIBLE?!

[aeroweb99]

Related... I doubt it, but you really should use the "px" after your rules. 5px instead of 5. Maybe throwing ie off?