IE9 rounded corners quasi working

[ElijahLynn]

See screenshot here --> http://ubuntuone.com/1byKwIl53oUg5MD6GpNnmm

I have applied the below code:

.button {
  // @include sassy-button-structure(border-radius, font-size, padding);
  @include sassy-button-structure(8px, 1.5em, 10px);
  // @include sassy-button-gradient(gradient-style, first-color, second-color, text-color, text-style, auto-states);
  @include sassy-button-gradient("matte", lighten($red, 5%), $red, $white, "false");
  font-weight: bold;
}

Any ideas? I am thinking it is just some CSS mistake on my part.

[jhardy]

Hey @ElijahLynn, I am sorry I havent had a chance to look at your issues yet, I promise it's on my todo list. Going to try to go over them first thing in the morning.

[ElijahLynn]

Thanks Jared

[jhardy]

Hey @ElijahLynn, I did some looking into this and it seems that IE will choke on border radius if you are using the filters to apply the gradients, which is what sassy buttons is doing. So one solution is to turn ie support off so the filters dont get applied, but then IE gets servered buttons that dont have gradients. Or IE can just have square buttons. It doesn't seem like there is a solution that can accomodate both for IE < 9.

I maybe try to do a little hack I had in place at one point in time that used a transparent png to give the appearance of a gradient and have that as an option for IE, but most people seemed to want the filter gradients served to IE.

[ElijahLynn]

Thanks Jared, @snugug confirmed this also. How would I turn IE support off so the filters don't get applied? I would prefer rounded corners over gradients in this case.

[Snugug]

@jhardy While most people may prefer the filters for IE, I'm sure they'd prefer Gradients+Rounded Corners. I would assume the reason they'd prefer the filters to the pngs because of the HTTP request; why not take full advantage of Compass and base64 encode the pngs?

[jhardy]

@Snugug, that is a great idea and I had not thought of that. I will implement that in my next release which will hopefully be sometime this week.

[Snugug]

Speaking of leveraging Compass, why are your instructions suggesting we install sassy buttons? Compass extensions should just allow us to @import them, no?

[jhardy]

@Snugug, true you can just @import them but I like to recommend people install sassy buttons since it will install a small partial they can reference if they need to. I will update documentation to clarify.

[Snugug]

I, personally, would prefer the other way around and recommend to just import from the extension so they don't need to re-install every time

On Sep 18, 2012, at 12:48 PM, Jared [email protected] wrote:

@Snugug, true you can just @import them but I like to recommend people install sassy buttons since it will install a small partial they can reference if they need to. I will update documentation to clarify.

— Reply to this email directly or view it on GitHub.

[jhardy]

I agree, thanks for all the feedback.

[Snugug]

Very welcome, any time. Love Sassy Buttons, happy to help.

~ Sam Richard 775-476-8484 @Snugug http://snugug.com

On Tuesday, September 18, 2012 at 1:00 PM, Jared wrote:

I agree, thanks for all the feedback.

— Reply to this email directly or view it on GitHub (https://github.com/jhardy/Sassy-Buttons/issues/24#issuecomment-8661986).

[ElijahLynn]

Looking forward to seeing how this turns out!

Thanks

[longpshorn]

So, have you heard of this... http://css3pie.com/?

It will make IE7+ have rounded corners. You just have to do something like...

.sassy-button { @include sassy-button; behavior: url(../../scripts/lib/pie.htc); }

Of course, subsitute your path for the pie.htc file.

On a somewhat related note, I did notice a potential bug. When the style of "flat" is applied, the filter for internet explorer is still added. I think the fix for this might be to just change line 13 of _sassy-button-gradients.sass from

@if $ie

to

@if $ie and $style != "flat"

Additionally, I was thinking that it might be good to not even spit out border radius styling when the $border-radius value is 0.

So, in _sassy-buttons.sass, line 69 would go from

@include border-radius($border-radius)

to

@if $border-radius > 0 @include border-radius($border-radius)

Let me know if you think there might be reasons not to do either of these.

I am really liking the plugin so far. Thanks for your work!

Regards, Patrick

[longpshorn]

After a bit more research, I realized that compass already includes support for css3pie.

To use it, you will just need to set up some default values and use some imports.

Here is an example...

@import "compass/css3"; @import "compass/css3/pie";

// Using my own downloaded copy of pie.htc because it has been // updated from the version available with compass. $pie-behavior: url('/scripts/lib/pie.htc');

// It is suggested that you use Sass's @extend directive to apply the PIE // behavior to your elements. Setting this variable will tell the pie mixin // to extend. Or you can just extend the base class yourself. $pie-base-class: pie-element;

// There are two approaches to creating PIE elements // The default approach is to make the element position: relative. .pie-element { // relative is the default, so passing relative // is redundant, but we do it here for clarity. @include pie-element(relative); }

Then, when I want to make sure that my corners get rounded, I use @include pie; in my target class or id selector. For example...

.sassy-button, %sassy-button { @include sassy-button; @include pie; }

Additional reference: http://compass-style.org/reference/compass/css3/pie/

[jhardy]

@longpshorn thats exactly what I was thinking would be the best solution to this issue, but have yet had a chance to upgrade the docs yet. Thanks for the great write up, I'll steal it and add it to the docs soon

[mauricegriffin]

@longpshorn Thanks for the reminder about compass and pie, and the clear explanation. Also, who doesn't want to @include pie? (Though of course keeping in mind possible bloat and slowdown from excess pie.. Oh the puns..)

[krystianbuczak]

Solution with css3pie and IE9 gradient + border-radius seems still bad (or I miss something). AFAIK css3pie doesn't play with IE filters. IE filter always cover element with a rectangle even with rounded corners generated by css3PIE. In my case I just used Modernizr and set filter to none for IE9 because it accepts nice svg gradients.

If someone decided to drop IE8 support ($sb-ie-support: false;) the task is easier - there is a proper compass gradient mixin variable for IE9: $experimental-support-for-svg: true;