border styles not removed in IE8

[Runeform]

hey there. first off, i love the script. the row aware feature is amazing especially for responsive sites.

i am having a strange issue however. in IE8 i am getting the following inline styles on my matchHeight elements.

border-top: medium none;
border-bottom: medium none;

it seems .css("border-bottom",""); is not doing its job in IE8 for some reason. I will look into it, but just wanted to let you know.

[liabru]

Thanks. The script doesn't use any .css("border-bottom","");, so do you mean e.g. $that.css({ 'display': '' }); isn't working in IE8?

I've tested the demo again in IE8 (emulation mode), but it seems to be fine, could this only be in the real IE8 browser only? Could it be a jQuery version issue?

[Runeform]

yes. specifically i meant this part.

// revert the temporary forced style
$elements.css({
'display': '',
'padding-top': '',
'padding-bottom': '',
'border-top': '',
'border-bottom': '',
'height': ''
});

BTW, looks fine to me, but you know how IE8 is...
tested the demo page straight from download in IE8 on a VM and im still getting the issue.

i also tested in IE9 and was able to reproduce the issue when using IE8 "document mode". IE8 "browser mode" did not reproduce.

i have included a screenshot. i guess we can rule out jquery version issue, as i was using your full package with its version of jquery.
Please let me know if there is any other info you need an thanks again for all the awesome work.

[liabru]

Ok so, turns out that there's specifically bugs with that approach in < IE8:
http://stackoverflow.com/questions/4036857/jquery-remove-style-added-with-css-function

@Runeform for now, I think you should modify your copy to use the .removeAttr('style'); approach?

I still need to think if that is appropriate to roll into the plugin myself though, since I'd rather not just remove the whole inline style attribute (in case other plugins are using it).

[Runeform]

wouldnt that remove the height that matchHeight places on the object? or does all that happen before the height is applied?

[liabru]

Yep that happens before the height is applied (see these lines), so should be fine.

That part of the code is preparation for finding rows.

[Runeform]

actually i just found a work around

        // must first force an arbitrary equal height so floating elements break evenly
        $elements.css({
            'display': 'block',
            'padding-top': '0',
            'padding-bottom': '0',
            'border-top-width': '0',
            'border-bottom-width': '0',
            'height': '100px'
        });

        // get the array of rows (based on element top position)
        rows = _rows($elements);

        // revert the temporary forced style
        $elements.css({
            'display': '',
            'padding-top': '',
            'padding-bottom': '',
            'border-top-width': '',
            'border-bottom-width': '',
            'height': ''
        });

since its not setting the additional properties of "border" it does leave the border style and color behind and removes successfully

[Runeform]

*it does 'not' leave...

[liabru]

Ah, looks like that might do the trick. I'll try that out and push it if it works, thanks.

EDIT: tested working fine, cheers