Have issue with IE bug - CSS

I borrowed Css Globe's easy slider, but I modified it to be laid out on the page.

 /* numeric controls */ 



ol#controls{
  margin:0.2em 1em;
  padding:0;
  height:16px;
  float:right;
  font-size:x-small;
  font-family: Arial, Verdana, Default;
  font-weight:normal;
 }

 ol#controls li{

  padding:0;
  float:left;
  list-style:none;
  height:16px;
  width:20px;
  background:yellow;
  margin:10px;
 }

 ol#controls li a{
  height:16px;
  line-height:18px;
  border:1px solid #ccc;
  background:#FFFFFF;
  color:#555;
  padding:0 5px;
  text-decoration:none;
  float:right;
 }

 ol#controls li.current a{
  background:#736357;
  color:#fff;
 }
 ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

I couldn't figure it out - IE7/开发者_StackOverflow8 slideshow navi (1,2,3,4) is spread widely when they should be arranged in close order to each other. See the example where they are spread widely.

Any idea why it is behaving weirdly? Thank you!

Testing in IE8.

You have this:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Which makes IE8 behave as if it's IE7 - that's not great, but it's not the problem.

You have this CSS file being included only if it's IE7 (which it "is" because of the above):

<!--[if IE 7]>
<link type="text/css" rel="stylesheet" href="css/homepage_css/hpie7.css" />
<![endif]-->

On ~Line 75 of hpie7.css, you have this:

ol#controls li{
    margin:10px 100px 0 0; 
    padding:0;
    float:left;
    list-style:none;
    height:16px;
    line-height:18px; 
}

If you remove the margin line, the numbers will be close together again instead of 100px apart.

It looks like you will have to (in the same file, so it's just for IE7) add a width to the <ol> like this:

ol#controls{
    ..
    width: 100px
}