3

I have some button controls with CSS line-height: 18px. Some are input controls type="button", and others are anchors stylized to appear as buttons like the input controls. In FF3.6.12/IE8 they are displaying the same height, but in IE7, the anchors are shorter in height. How do I get them to display correctly in IE7?

ajm
  • 19,795
  • 3
  • 32
  • 37
KingCobra42
  • 51
  • 1
  • 1
  • 5
  • I'll take a look if you can provide a [jsFiddle](http://jsfiddle.net/) or [JS Bin](http://jsbin.com/) test case that accurately reproduces your problem. – thirtydot Jun 08 '11 at 19:33
  • jsFiddle - for the HTML window:
    Reset
    – KingCobra42 Jun 08 '11 at 21:10
  • CSS window: .Footer { padding:5px; margin:0px; border-top:1px solid #557AB5; font-style:italic; } .Footer input[type=button], .Footer input[type=submit], .Footer .Button { float:right; font-style:normal; line-height: 16px; padding: 3px 7px; } – KingCobra42 Jun 08 '11 at 21:12
  • input[type="button"], input[type="submit"], .Button { background: none repeat scroll 0 0 #EEEEFF; border: 1px solid #414649; color: #002570; cursor: pointer; font-size:12px; font-weight: bold; letter-spacing: 0.05em; margin: 0 2px; padding: 3px 7px; text-shadow: 1px 1px 1px #DCECF6; -moz-border-radius: 12px 12px 12px 12px; -webkit-border-radius: 12px 12px 12px 12px; line-height: 16px; } – KingCobra42 Jun 08 '11 at 21:12
  • input[type="button"]:hover, input[type="submit"]:hover, .Button:hover { border: 2px solid #414649; padding:2px 6px; text-shadow: 1px 1px 0.0px #DCECF6; } input[type="button"]:disabled, input[type="submit"]:disabled, .Button:disabled { background-color:#F4F4F4; color:#87908E; border: 2px solid #BCC0C2; cursor:auto; padding:2px 6px; } – KingCobra42 Jun 08 '11 at 21:13
  • You will see the described behavior therein. – KingCobra42 Jun 08 '11 at 21:13
  • @KingCobra42: Can't you paste it in there yourself? Click the "Save" button once you've done so. The link you need to give me will be in your address bar. Test it in IE7 to make sure the demo has the same problem. – thirtydot Jun 08 '11 at 21:13
  • Oh, I did not know about the link being in the address bar to send you. I'll get it for you. – KingCobra42 Jun 08 '11 at 21:25
  • Here you go: http://jsfiddle.net/DnGvF/ – KingCobra42 Jun 08 '11 at 21:26
  • I have used jsfiddle in the past just to test code, but had not saved anything there before. – KingCobra42 Jun 08 '11 at 21:28
  • I'll be leaving the office shortly, but will check for you feedback in the morning. Thanks. – KingCobra42 Jun 08 '11 at 21:28

3 Answers3

3

I took your demo: http://jsfiddle.net/DnGvF/

and added just this CSS at the end: http://jsfiddle.net/gRF9g/

/* ie7 fixes */
.Footer input[type=button],
.Footer input[type=submit]
{
    overflow: visible;
    *height: 24px;
    *line-height: 15px
}

Some explanation of what's going on there:

  • There's a known bug in IE7 that overflow: visible fixes, related to the width of the button. Try looking at my demo in IE7 with and without it.
  • I'm using the Star property hack to provide change the height and line-height for only IE7 and lower. You can tweak the numbers I picked if you need to.
  • That hack is invalid CSS, but there's no problem using it. It's never going to come back and bite you - it's a "safe hack". Nevertheless, if you require 100% valid CSS, there are alternatives.

It now looks consistent between IE7 and the later versions.

Yes, this is a little kludgy, but at least it's all together in the CSS in one place, with a clear comment.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
1

Honestly, if IE7 is the only problem, I'd just go with a hack and bump up the line-height:

*+html .button { line-height:24px }

If you use something like Modernizr, you could do away with the hack and use:

.ie7 .button { line-height:24px }

Of course, the other alternative is to actually track down why IE7 is behaving the way it is, and rewrite your CSS accordingly, but without any posted code, I can't help you with that.

EDIT: Forgot about this method of targeting just IE7:

<!--[if IE7]><style type="text/css">.button{line-height:24px}</style><![endif]-->
Chris Pratt
  • 232,153
  • 36
  • 385
  • 444
  • input[type="button"], input[type="submit"], .Button { background: none repeat scroll 0 0 #EEEEFF; border: 1px solid #414649; color: #002570; cursor: pointer; font-size:12px; font-weight: bold; letter-spacing: 0.05em; margin: 0 2px; padding: 3px 7px; text-shadow: 1px 1px 1px #DCECF6; -moz-border-radius: 12px 12px 12px 12px; -webkit-border-radius: 12px 12px 12px 12px; line-height: 18px; } – KingCobra42 Jun 08 '11 at 19:11
  • Reset – KingCobra42 Jun 08 '11 at 19:15
  • Well, nothing looks out of place there, but I think you took me a little too literally. It would take looking over all the CSS that's run on that page, probably even the HTML that's used in constructing the button, and even then, there might not be a solution to be had. If bumping up the line-height just for IE7 works, then go with that. It's not worth the time or trouble to try to align your code with IE7's buggy rendering engine. – Chris Pratt Jun 08 '11 at 19:17
  • I tried bumping up the value to 24 on that property, but it does not solve the problem. – KingCobra42 Jun 08 '11 at 19:19
  • What is interesting is that the CSS for those controls is identical when viewing it in Firebug while in FF. A buggy rendering engine - just what we need, another one of those! – KingCobra42 Jun 08 '11 at 19:21
  • Unfortunately it is requirement of the project to support IE7. – KingCobra42 Jun 08 '11 at 19:22
  • Haha, well, it's not technically *another* one of those. It's the same one: Trident. The same bloody buggy rendering engine Microsoft has been trying to polish since IE3. IE9 does pretty well now, but I still think it's only a matter of time before we'll be doing hacks for that too. – Chris Pratt Jun 08 '11 at 19:23
  • There's a difference between support and pixel-parity. If you've agreed to pixel-parity, I'm sorry, because your life is going to be a never-ending hell. The button works, still, I take it? It's just not the same height? – Chris Pratt Jun 08 '11 at 19:27
  • Yes, they work. Just ugly being different heights. We haven't actually agreed to pixel-parity, so we're not locked in on that count. – KingCobra42 Jun 08 '11 at 19:31
  • I know it sounds retarded, but have you thought about taking it the other way? Instead of trying to make the anchors higher, bring the line-height down on the buttons (inputs, that is) in IE7. – Chris Pratt Jun 08 '11 at 19:40
  • That is kludgy, since it can only be applied to IE7, but I guess that may be the best answer. – KingCobra42 Jun 08 '11 at 19:54
  • But I guess anything to solve this is going to be inherently kludgy. No insult intended. I appreciate the help. – KingCobra42 Jun 08 '11 at 20:07
0

Buttons in IEs have additional padding/borders/whatever - they do not style well as in other browsers.

RobertO
  • 2,655
  • 1
  • 20
  • 18
  • Even if there is CSS that should theoretically override the default styling for them for IE7? – KingCobra42 Jun 08 '11 at 19:48
  • Theoretically you can try to experiment with `padding-top/bottom; line-height` of button or anchor. – RobertO Jun 08 '11 at 20:13
  • Well, I set the padding, which was not set, for my Button class (applied to anchors), and I can see in Firebug while in FF that it is now the same for both anchors and inputs. However, it does not fix the problem in IE7. – KingCobra42 Jun 08 '11 at 20:55