Fork me on GitHub
You should grab 2.1.9, released 18 March. It's what all the cool kids are doing.

Bittersweet theme - MSIE fixes

LeeHLeeH
edited March 2012 in Feedback

I've mentioned in a couple of other threads that I'm rolling out a private forum based on the 2.1 branch and a modified version of the new Bittersweet theme. In preprod testing, I saw two show-stopper rendering issues, both with IE9 & 10:

1) The sign-in popup box is invisible;

2) The red CSS-styled buttons are gray instead of red (example)

I've implemented very simple fixes that have made both problems go away for IE7-10.

For the first, an MSIE-specific modification of the .Overlay div class's position attribute in my custom.css file seems to clear up the problem. I now get a visible and usable sign-in popup in IE7-10:

.MSIE .Overlay {
position: static;
}

The button styling doesn't appear to work because versions of IE prior to 10 do not support the CSS3 gradient function, which is what the button is styled with. For IE10, adding another line into custom.css fixes everything:

.Button:focus {
background:-ms-linear-gradient(top, #AA1100 100%, #CC3300 100%);
}

Getting IE7-9 to correctly display a gradient background for the button is a bit more problematic. This extremely helpful Stackoverflow question gives one possible solution, which involves using PHP to generate an SVG and then use that as the button background.

However, I opted for the lazy man's method and instead added these two lines to custom.css:

.MSIE .BigButton, .MSIE .Button {
background-color: #BA1900;
}

It's not as pretty as the gradient, but it's also a hell of a lot simpler than calling a php file from within CSS ;) The end result looks like this. Compare with the same button in Firefox. Close enough for me!

Edited — added second button override

Comments

Sign In or Register to comment.