CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-7
Chris
Chris

Reputation: 1131

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>

Upvotes: 0

Views: 2370

Answers (2)

ayyp
ayyp

Reputation: 6598

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.

Upvotes: 0

thirtydot
thirtydot

Reputation: 228162

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.

Upvotes: 1

Related Questions