Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS3 button probs

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #35208
    tobeeornot
    Member

    Can’t get this button to work in latest version of IE. Any suggestions?


    .button {
    background-image: -moz-linear-gradient(top, #6b7886, #3b4f63);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #6b7886),color-stop(1, #3b4f63));
    background-image: -ms-linear-gradient(top, #6b7886, #3b4f63);
    background-image: -o-linear-gradient(top, #6b7886, #3b4f63);
    background-image: linear-gradient(top, #6b7886, #3b4f63);
    padding: 5px 15px;
    color: white;
    font-size: 1.2em;
    font-weight: normal !important;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid white !important;
    -moz-box-shadow: 1px 1px 3px #666;
    -webkit-box-shadow: 1px 1px 3px #666;
    box-shadow: 1px 1px 3px #666;
    }
    .button:hover {
    background-image: none;
    background-color: #6b7886;
    -moz-box-shadow: 0px 0px 2px #999;
    -webkit-box-shadow: 0px 0px 2px #999;
    box-shadow: 0px 0px 2px #999;
    text-decoration: none !important;
    padding: 4px 14px;
    #90821
    chrisburton
    Participant

    I made a few changes for viewing purposes but all in all, what isn’t working for you?
    http://jsfiddle.net/Rz4Cm

    Edit: Just noticed you said IE.

    #90822
    tobeeornot
    Member

    I thought the latest version of IE was supposed to be ok for buttons?

    #90823
    chrisburton
    Participant

    Nope, not for gradients. What you can do is use an image on background-image below the gradients and IE will pick that up and the rest of the browsers will use the css gradients.

    #90824
    tobeeornot
    Member

    What is the fallback? A rollover image ?

    #90825
    chrisburton
    Participant
            background-image: -moz-linear-gradient(top, #6b7886, #3b4f63);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #6b7886),color-stop(1, #3b4f63));
    background-image: -ms-linear-gradient(top, #6b7886, #3b4f63);
    background-image: -o-linear-gradient(top, #6b7886, #3b4f63);
    background-image: linear-gradient(top, #6b7886, #3b4f63);
    background-image: url(path/to/image.jpg); /* IE Support */
    #90826
    tobeeornot
    Member

    Whoaa…thanks, I think.

    #90827
    chrisburton
    Participant

    You’re welcome..I think :P.

    Use a sprite though since the image should change on hover. If you have one already for your site, squeeze this button in it, shouldn’t be pretty light in file size.

    #90828
    tobeeornot
    Member

    Thanks!! Very handy to know.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.