SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I want CSS gradient to a button with background image supporting IE8 & 9.

    You can check this URL in IE and other browsers. http://jsfiddle.net/aEK4j/

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Well for IE7 and 8 you could use the filter. It should be the last thing listed.
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff9d295', EndColorStr='#fff1a32b');

    the -ms prefix is deprecated for actual linear-gradient. For IE10 (and 9?) you should be able to use it straight and prefixless.

    Now the trouble with IE9 is, it gets the gradient, but lets them leak out of the corners.

    If you don't want to go into 500-lines-of-css-for-each-browser, the simplest solution is to wrap your element in another element, and put the rounded corners on *that* instead. In IE9, while an element can't hold its own insides in with rounded corners, a container can.

    <span class="ie9wrap"><input...></span>
    .ie9wrap gets display: block and rounded corners.
    .ie9wrap input gets the gradients.

  3. #3
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    When it comes to gradients, one has to now change the format, With IE, use the "-ms-" prefix for the old format, goes for all browsers.

    http://www.sitepoint.com/using-unpre...dern-browsers/
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •