IE Floating bug

**evlich** · Aug 13, 2005, 15:45

Hi, I am working on a really simple counting script which scrolls the numbers like they do on odometers (the analog ones). It works great in Firefox, but in IE the last digit string is never in the right place regardless of how many their are. Here's what I have:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Document</title>
<script type="text/javascript">
function run(prefix,timeout) {
  var n = 0;
  var ele = document.getElementById(prefix+'_' +n);
  var tp = (parseInt(ele.style.top)-3) % (30*11); // Height * 11 (10 digits + repeated 0)
	ele.style.top = tp+'px';
	while( tp % 30 == 0 ) {
	  n++;
	  ele = document.getElementById(prefix+'_' +n);
    tp = (parseInt(ele.style.top)-3) % (30*11); // Height * 11 (10 digits + repeated 0)
	  ele.style.top = tp+'px';
	}
  setTimeout("run('"+prefix+"',"+timeout+")", timeout);
}
</script>
<style type="text/css">
.whitenum {background-color: black; color: white; line-height: 30px; font-size: 28px; width: 23px; text-align: center; position: relative; float: left; clear: none}
.blacknum {background-color: white; color: black; line-height: 30px; font-size: 28px; width: 23px; text-align: center; position: relative; float: left; clear: none}
#odom_1 {width: 184px; height: 30px; border: 1px solid black; overflow: visible}
</style>
</head>
<body onload="run('odom_1',100);">

<div id="odom_1">
<div id="odom_1_7" class="whitenum" style="top: 0px">
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0
</div>
<div id="odom_1_6" class="whitenum" style="top: 0px">
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0
</div>
<div id="odom_1_5" class="whitenum" style="top: 0px">
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0
</div>
<div id="odom_1_4" class="whitenum" style="top: 0px">
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0
</div>
<div id="odom_1_3" class="whitenum" style="top: 0px">
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0
</div>
<div id="odom_1_2" class="whitenum" style="top: 0px">
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0
</div>
<div id="odom_1_1" class="whitenum" style="top: 0px">
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0
</div>
<div id="odom_1_0" class="blacknum" style="top: 0px">
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0
</div>
</div>

</body>
</html>

Everything is stuffed onto one page because I'm currently just trying to get this to work. Does anyone have any ideas what's going on with IE? Thanks a lot.

**BonRouge** · Aug 13, 2005, 17:09

Remove the XML declaration.

**evlich** · Aug 13, 2005, 18:21

Thanks, that did it. Why is it that the xml declaration is throwing off IE?

**evlich** · Aug 13, 2005, 18:28

I changed the overflow to hidden (it being set to visible was merely for debugging purposes). But without the xml declaration, the overflow property is being ignored. Basically, when the xml declaration is there, the positioning is wrong and when the xml is not there the overflow is being shown regardless. What's going on? Thanks a lot.

**sbob** · Aug 13, 2005, 18:32

Why is it that the xml declaration is throwing off IE?

Anything before the DOCTYPE declaration will throw IE into quirks mode, not to mention that it doesn't support XHTML at all, so the xml declaration is worthless in IE.

**BonRouge** · Aug 13, 2005, 19:49

Code:

#odom_1 {
position:relative;
}

The SitePoint Forums have moved.

User Tag List

Thread: IE Floating bug

Thread Tools

Display

IE Floating bug

Bookmarks

Bookmarks

Posting Permissions