IE silliness

[mydoglixu]

the Approve, Decline, Cancel buttons are not lining up correctly in IE. The funny thing is, on Win 8.0/IE 10 it works fine but other browsers do not see the same thing!

The text winds up wrapping below the icons and outside of the boundaries. Any ideas??

http://dev.noetyx.com/jsyzdek/defaultv1c.aspx

[hanswilmink]

It works fine with the safari browser, but you knew that already… could you paste the css code which you use for positioning the icons and the text for the buttons?

[Senff]

Buttons line up fine in Windows 7 / IE10 (also in IE7, IE8 and IE9 mode) and Chrome. In which browser does it NOT display properly?

Not sure what’s going on on that page though. The actual content shows for a second and then disappears (in any browser).

[paulob]

Hi,

I see the text in the buttons dropped well below the button which is caused by the line-height of 65px that you have added here.

.rbVerticalButton .rbDecorated {
   display: block;
   height: 65px;
   padding-left: 6px;
   padding-right: 10px;
   border: 0;
   text-align: center;
   vertical-align: bottom;
   background-position: right -200px;
   line-height: 65px;
}

Change the line-height to match the height of the button and it will fit. You may need to do that with a special class if you are using that rule elsewhere and need the 65px line-height.

You are also setting IE to run in IE7 mode:

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

Remove that or change it to “edge”.

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

Otherwise you are telling all good versions of IE to behave as the worst.:) Unless of course you have scripts that only work when IE is in IE7 mode and then it would be time to update the site .

[Author]

Posts