rounded corners with gradient background in ie9?

[freelance84]

I have a button with some issues in ie9...

 

Here is the css being applied:

.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
display: inline;
vertical-align: baseline;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
-moz-border-radius: 5px;
border-radius: 5px;
}
.medium {
font-size: 9pt;
padding-top: 0.1em;
padding-bottom: 0.1em;
}
.blue {
color: #FFFFFF;
border: solid 1px #0076a3;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top,  #00adee,  #0078a5);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#46b8dc), to(#1194cf));
background: -moz-linear-gradient(top,  #46b8dc,  #1194cf);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#46b8dc', endColorstr='#1194cf');
}
.blue:active {
color: #FFFFFF;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top,  #0095cc,  #00678e);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}

 

And here is the html:

<input class="button blue large" type="button" value="Start Writing" onclick="window.location.href='http://www.mysite.net/writer.php'"/>

 

The problem:

In ie9 the radius gets applied to the border but not the background filter which results in the button being square with a slightly dark rounded border eating into the corners.

 

If i comment out the filter (declaration 6 on the .blue class) the button in ie9 returns to being round but obviously the background is now plain blue.

 

Could anybody possibly help? Is it possible to have a rounded button with a gradient background in ie9?

[cssfreakie]

as far as i know that's a bug. you could try, instead  of using the automated gradient,  to set a background. Certainly since it's a linear gradient.

than set conditional comments to target ie 9 and i bet it works

[freelance84]

(sorry for the late reply)

 

Ah ok, that's a different approach. However i'm a little confused, are you saying:

 

A ) Replace the buttons background with a basic 1px wide by Xpx high image on x-repeat

or

B) Set a conditional to only do option A in IE9? And if so, how? Is it possible to set a conditional within the style its self, or would i have to dump the conditional into the IE9 css hack file?

 

I suppose if i did option A then there would be a lot more download usage as each button requires an image (of which there are 3 different heights and 5 different colours), however if a conditional cannot be added into the actual style itself...?

[cssfreakie]

Almost I would say. Combine A and B and never use css hacks. that would be my approach

more info on conditional comments here: http://www.quirksmode.org/css/condcom.html (google ftw)

 

Since other modern browsers seem to like your gradient and round corners with the css 3 property, but not ie9 there is no need to load an image in their case. so we use conditional comments for that ( so only IE 9 gets that background image). Keep in mind though there are quite some people out there that do not have the latest browser.

[freelance84]

I know this seems a bit rookie but ive never thought of doing it.... is this possible...

 

.blue {
color: #FFFFFF;
border: solid 1px #0076a3;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top,  #00adee,  #0078a5);
<!--[if lt IE 8]>
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
<![endif]-->
<!--[if IE9]>
        background-image: url(png/blue.png);
background-repeat: repeat-x;
<![endif]-->
}

[cssfreakie]

that will not work. as said avoid css hacks, use teh conditional comment inside you <head></head> and link to a special stylesheet or plpace it in between styletags.

[diptiranjan]

what you want exactly ?try to drag the button image using Faststone capture so that it is clear to everybody?

 

 

[freelance84]

haha nice diptiranjan, do you have any connections with this capture program by any chance  I gave it a go none the less as i am currently looking for a good capture program, but the yellow circle behind the mouse... when it hovers over a yellow/orange button it looks mighty odd. Kind of a pukey sort of colour.

 

that will not work. as said avoid css hacks, use teh conditional comment inside you <head></head> and link to a special stylesheet or plpace it in between styletags.

Yea i didnt think it would.

I'll have to make a new IE9Debug.css (already got one for 7 and 8, was kinda hoping ie9 would have sorted things out. still baffles me how a company so big can produce something so poor)

 

[cssfreakie]

I'll have to make a new IE9Debug.css (already got one for 7 and 8, was kinda hoping ie9 would have sorted things out. still baffles me how a company so big can produce something so poor)

 

Well that's the way they roll, their new site to encourage you to get IE9 is build with crap loads of tables. So it seems they either like weird practises a lot or they are just drunk all the time.

[diptiranjan]

@freelance84 is your problem solved??

may i know what was the solution?

[freelance84]

I'll have to make a new IE9Debug.css (already got one for 7 and 8, was kinda hoping ie9 would have sorted things out. still baffles me how a company so big can produce something so poor)

 

Well that's the way they roll, their new site to encourage you to get IE9 is build with crap loads of tables. So it seems they either like weird practises a lot or they are just drunk all the time.

Haha, probably a little of each. There does seem to be a steady decline in ie tho according to W3schools tho so fingers crossed this increases or they get their act together.

@freelance84 is your problem solved??

may i know what was the solution?

Havent implemented it yet, will be at some point 2mo now. Will let you know the outcome

[freelance84]

Ok so to solve the issue, i made blue class in three different css files (fortunately, the ie simply merges the class of the same name together). NB, these classes are added with the 'button' class and 'medium' class as originally posted...

 

Here is the CSS which works in all good browsers:

<link href="baseCSS.css" rel="stylesheet" type="text/css" />

/* blue */
.blue {
color: #FFFFFF;
border: solid 1px #0076a3;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top,  #00adee,  #0078a5);
}
.blue:hover {
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#46b8dc), to(#1194cf));
background: -moz-linear-gradient(top,  #46b8dc,  #1194cf);
}
.blue:active {
color: #FFFFFF;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top,  #0095cc,  #00678e);
}

 

Here is the code for ie8 and below (basically taken out the wonderfully simple DXImageTransform to stop it being read by IE9 as cssfreakie said):

<!--[if lte IE 8]><link href="IElte8_debug.css" rel="stylesheet" type="text/css" /><![endif]-->

/* blue */
.blue {
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#46b8dc', endColorstr='#1194cf');
}
.blue:active {
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}

 

And here is the code for the all new and improved ie9  (basically reverted back to the use of an image, as MS see this as a step... forward? oh no wait, backward... im confused  ):

<!--[if IE 9]><link href="IE9_debug.css" rel="stylesheet" type="text/css" /><![endif]-->

/* blue */
.blue {
background-image: url(png/bbGrad1.png);
background-repeat: repeat-x;
}
.blue:hover {
background-image: url(png/bbGrad2.png);
background-repeat: repeat-x;
}
.blue:active {
background-image: url(png/bbGrad3.png);
background-repeat: repeat-x;
}

 

 

<edit> OH... and thanks cssfreakie</edit>

[cssfreakie]

cheers mate! I knew you had it in you