uPortal
  1. uPortal
  2. UP-3083

Button styling in IE9 is not correct

    Details

    • Type: Bug Bug
    • Status: Resolved
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 4.0.0-RC1
    • Fix Version/s: 4.0.9, 4.1.0
    • Component/s: User Interface
    • Labels:
      None

      Description

      CSS(3) styling is messed up in IE9. The border has rounded corners, but the background does not. Buttons in the portlet toolbar have the wrong default state style and become unreadable.

      See attached screenshot.

      1. login-button-fix.patch
        17 kB
        Jacob Lichner
      1. Screen Shot 2012-09-07 at 3.12.40 PM.png
        178 kB
      2. Screen Shot 2012-09-07 at 4.20.32 PM1.png
        78 kB
      3. up_IE9_buttons.png
        40 kB

        Activity

        Hide
        Gary Thompson added a comment -

        The screenshot is a view of the Portlet Administration portlet:
        Admin Tools > Portal Administration > Portal Entity Administration > Manage Portlets

        Show
        Gary Thompson added a comment - The screenshot is a view of the Portlet Administration portlet: Admin Tools > Portal Administration > Portal Entity Administration > Manage Portlets
        Hide
        Jeff Cross added a comment -

        As described in this article, although IE9 supports CSS3 rounded corners, and the legacy filter for background gradients, the two don't play well together: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

        Some options for IE9:

        • Use a background image to accomplish gradient effect with rounded corners
        • Use a solid color background
        • Get rid of rounded corners on anything with a CSS3 background gradient
        • Last resort - Create a javascript module to dynamically create SVG XML (supported in IE9) and apply to DOM elements with specific classes or properties
        Show
        Jeff Cross added a comment - As described in this article, although IE9 supports CSS3 rounded corners, and the legacy filter for background gradients, the two don't play well together: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/ Some options for IE9: Use a background image to accomplish gradient effect with rounded corners Use a solid color background Get rid of rounded corners on anything with a CSS3 background gradient Last resort - Create a javascript module to dynamically create SVG XML (supported in IE9) and apply to DOM elements with specific classes or properties
        Hide
        Jacob Lichner added a comment -

        Attaching files and a patch... Flat buttons in ie, for now. Also did some refactoring.

        Show
        Jacob Lichner added a comment - Attaching files and a patch... Flat buttons in ie, for now. Also did some refactoring.
        Hide
        Jacob Lichner added a comment -

        a.button needed an !important tag... new patch cough github... cough

        Show
        Jacob Lichner added a comment - a.button needed an !important tag... new patch cough github... cough
        Hide
        Eric Dalquist added a comment -

        So which patche(s) files need to be applied for this?

        Show
        Eric Dalquist added a comment - So which patche(s) files need to be applied for this?
        Hide
        Jacob Lichner added a comment -

        Looks like this is no longer an issue. See screenshot.

        Show
        Jacob Lichner added a comment - Looks like this is no longer an issue. See screenshot.
        Hide
        Jacob Lichner added a comment -

        On second thought, I take that back. It is still an issue...

        Show
        Jacob Lichner added a comment - On second thought, I take that back. It is still an issue...
        Hide
        Jacob Lichner added a comment -

        Attaching new IE9 screenshot

        Show
        Jacob Lichner added a comment - Attaching new IE9 screenshot
        Hide
        Eric Dalquist added a comment -

        Merged pull request

        Show
        Eric Dalquist added a comment - Merged pull request

          People

          • Assignee:
            Unassigned
            Reporter:
            Gary Thompson
          • Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: