Search code examples
javascripthtmlcssinternet-explorer-7prototypejs

Absolutely positioned span inside a css button not showing in IE7

I am having a problem getting my js animation of 3 dots appearing to work in IE7. This seems to be connected to an issue with the span the 3 dots are in not showing due to an issue of position or maybe z-index. I have already tried messing with the z-index and adding a div around my span and they don't seem to be helping in this case.

The span that is miss-behaving is:

.dots {
  position: absolute;
  top: -3px;
  font-size: 40px; 
  line-height: 10px;   
}

it is inside:

.button {
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 16px;
  display: inline-block;
  background-clip: padding-box;
  border: 1px solid #6F4D38;
  font-weight: bold;
  text-transform: uppercase;
  margin: 9px 9px 10px 9px;
  padding: 3px 8px 3px 10px;
  border-radius: 22px;
  position: relative;
  -webkit-box-shadow: inset 0px 1px 4px #fff, 0 1px 0px 0px black;-moz-box-shadow:    inset 0px 1px 4px #fff, 0 1px 0px 0px #000;box-shadow:         inset 0px 1px 4px #fff, 0 1px 0px 0px black;
  letter-spacing: 3px;
  z-index: 1;
  overflow: none;
}

The code I am working on is at http://jsfiddle.net/gYjEH/1/

Solution

  • http://jsfiddle.net/gYjEH/6/show/

    To show dots in IE7 line-height of the span should be equal to its font-size, otherwise you'll see only top empty part of the span (dots are at the very bottom).