Bittersweet theme - MSIE fixes

LeeH

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

aery

I love bitter sweet. Thanks for making it better.

May I know your private forum url?

LeeH

It's not accessible from the Internet yet, so knowing the URL wouldn't help you

422

Wht not specify a png if user is on msie

LeeH

Sure, you could do that as well. I'd bet it's less resource-intensive than generating an svg via php, but more resource intensive than just throwing out a css background color.

I suppose the advantage to a css background color is that you can still quickly and easily overlay styled text on top of it; doing that with an image requires a bit more work.

Todd

If we keep spending hundreds of hours making sure that IE looks as good as the modern browsers then people will keep their sense of IE entitlement. We'd rather create two themes than one theme that looks the same in IE as the better browsers.

@LeeH's fixes are the exact kind of thing we want.

LeeH

Thanks, Todd BTW, the private forum soft-launched today. If you guys want to see how I've modified Bittersweet, head over to http://forum.chroniclesofgeorge.com.