HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Bittersweet theme - MSIE fixes

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


  • Options
    aeryaery Gtricks Forum in 2.2 :) ✭✭✭

    I love bitter sweet. Thanks for making it better.

    May I know your private forum url?

    There was an error rendering this rich post.

  • Options

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

  • Options
    422422 Developer MVP

    Wht not specify a png if user is on msie

    There was an error rendering this rich post.

  • Options

    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.

  • Options
    ToddTodd Chief Product Officer Vanilla Staff

    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.

  • Options

    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.

Sign In or Register to comment.