IE CSS padding-left is only padding first line of text

I am going through my style sheets in an attempt to make my CSS for IE friendly and I am running into an issue with my padding-left for some reason. It is only applying the padding to the first line of text in my 'span' tag. When the text runs to the next line it goes all the way to the left inside the 'span' element.

(Can't show screenshot for NDA purposes)

BROWSER: IE7

CSS:

#rightContent .rightNav a,#rightContent .rightNav a:visited{
  color:black;
  display:block;
  width:92px;
  padding-right:12px;
  height:35px;
  background:url("../images/nav_off.png");
}
#rightContent .rightNav span{
  display:table-cell;
  vertical-align:middle;
  height:28px;
  padding-left:13px;
  font-size:9px;
}

HTML:

<li>
  <a href="">
    <span>This text is too long.</span>
 开发者_运维知识库 </a>
</li>

IE7 does not support display: table-cell: http://caniuse.com/css-table

You'll have to find an alternative technique, if only for IE7.

Try adding *float: left to the span - it will only apply to IE7 and lower. Maybe that will be a "good enough" fix.

It looks like you're using display:table-cell; vertical-align:middle for vertical centering. If it's absolutely vital to have that in IE7, it is possible without resorting to JavaScript, but it's a pain in the ass.

It seems similar to the question asked here: Why Doesn't IE7 recognize my css padding styles on anchor tags? I'm not sure exactly why it does that, it seems to be an IE bug. I would suggest either wrapping your text in something else(a div or a p tag), or just putting the text straight in the a tag and if you need specific styles for it just give the a tag a class.