IE9 css issue, forced to use float:left / float:right

Question

I'm having a bit of an issue with IE9 and just can't figure it out, I'm creating a button in CSS with a linear gradient, it displays perfectly in Chorme, Firefox and Safari but just not in IE9

http://ubizzo.co.uk/img/ie9.png

http://ubizzo.co.uk/img/ch-fi-sa.png

First image link is IE9, second image link is every other browser, the only way I can get it work is if I add float:left or float:right in the css as below but then that obviously screws up the layout, I've tried to use float:none but that doesn't work either, I've tried this in a blank html file just to rule out any conflicting css but still doesn't work :-s

.purchase {
    margin-top: 5px;
    display: block;
    width: auto;
}

.purchase a {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 10px;
    cursor: pointer;
    border: none;
    color: #fff;
    line-height: 1em;
    width: auto;
    **float: left;**
    border-image: initial;
    text-align: center;


    border: solid 1px #189199;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    background: -moz-linear-gradient(top, #19d7e3, #12A4B3);
    background: -webkit-gradient(linear, left top, left bottom, from(#19d7e3), to(#12A4B3));
    background: -moz-linear-gradient(top, #19d7e3, #12A4B3);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#19d7e3', endColorstr='#12A4B3');
}

.purchase a:hover {

    background: -moz-linear-gradient(top, #12A4B3, #19d7e3);
    background: -webkit-gradient(linear, left top, left bottom, from(#12A4B3), to(#19d7e3));
    background: -moz-linear-gradient(top, #12A4B3, #19d7e3);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#12A4B3', endColorstr='#19d7e3');

    color: #ffffff;
}

Thanks for any help, Adam.

http://jsfiddle.net/gdmP8/ - notice that the button only displays once you've addded float:left/right

Can you add the relevant HTML? Can you make a http://jsfiddle.net/ demo of the problem? — thirtydot, Jun 13 '12 at 09:43
your question still appearing as a unanswered i have seen that there is valid working answer please approve answer thanks. — cgvector, Jun 14 '12 at 11:05

score 3 · Accepted Answer · answered Jun 13 '12 at 10:10

3

apply this css thi will work in all browser i have check in chrome, Firefox, safari, opera, ie-7, ie-8, ie-9

background: #12a4b3; /* Old browsers */
background: -moz-linear-gradient(top,  #12a4b3 0%, #19d7e3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12a4b3), color-stop(100%,#19d7e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #12a4b3 0%,#19d7e3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #12a4b3 0%,#19d7e3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #12a4b3 0%,#19d7e3 100%); /* IE10+ */
background: linear-gradient(top,  #12a4b3 0%,#19d7e3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12a4b3', endColorstr='#19d7e3',GradientType=0 ); /* IE6-9 */

answered Jun 13 '12 at 10:10

CSS Guy

1,978
3
18
27

Hi CSS Guy, thanks for the reply, although this method does display the button in IE9, it doesnt apply the gradient only the solid colour - background: #12a4b3; /* Old browsers */ – adam egglestone Jun 13 '12 at 10:37
i have checked same code in all browser and it's working fine will you please shared jsfiddle link so i can better understand.. – CSS Guy Jun 13 '12 at 10:43
http://jsfiddle.net/rizwanabbasi/GcYPy/ check this i have changed just link Buy Now – CSS Guy Jun 13 '12 at 11:49

score 0 · Answer 2 · edited May 23 '17 at 12:03

Float problems in IE 9 are usually due to a bad header. Check with this one :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Taken from IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly (not sure if duplicate)

And you probably should use the now standard linear-gradient (or at least -ms-linear-gradient and -o-linear-gradient instead of just using moz and webkit specific gradients).

score 0 · Answer 3 · answered Jun 13 '12 at 09:45

0

You'll have this same problem in Opera, why don't you just stick to a simple button image rollover for IE?

answered Jun 13 '12 at 09:45

rrrcode

107
3
10

IE9 css issue, forced to use float:left / float:right

3 Answers3