CODEWITHSUNDEEP
jqueryjquery-uithemesblockui
camainc
camainc

Reputation: 3810

BlockUI jquery-ui theme support in IE

This may be something I just have to live with, but does the blockUI plugin jQuery-ui theme support supposed to work with IE?

For some reason, the overlay always show up solid, with no opacity. The normal blockUI overlay works fine, but when I enable theming, the overlay shows up solid. This is really ugly in IE (which I my users are required to use).

I am using IE 7. I imagine the plugin works fine with IE 9, not sure about IE 8.

Has anyone else experienced this? It even works this way on the blockUI demo page (at least for me.) Anyone know of a work-around?

http://jquery.malsup.com/block/#demos

Thanks in advance.

Upvotes: 4

Views: 4174

Answers (2)

Ron DeFreitas
Ron DeFreitas

Reputation: 657

BlockUI uses CSS Border-Radius, which is not support in IE 6/7/8

This is a browser limitation and not something you can get around without using external polyfills. Even the regular jQueryUI themes are square in those browsers normally.

Upvotes: 1

marc.d
marc.d

Reputation: 3844

thats a bug in blockUI, the generated overlay div looks like this

<div class="blockUI blockOverlay ui-widget-overlay" 
style="z-index: 1001;
position: fixed; 
filter: ; 
zoom: 1;" 
jQuery1306503573140="70"/>

the empty inline "filter" property overwrites the css property in .ui-widget-overlay but you can fix this by yourself by editing your jquery-ui.x.x.x.xxxx.css file.

just search for

/* Overlays */
.ui-widget-overlay { 
background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; 
opacity: .30;
filter:Alpha(Opacity=30); 
}

and add !important behind the filter property like this

/* Overlays */
.ui-widget-overlay { 
background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; 
opacity: .30;
filter:Alpha(Opacity=30) !important; 
}

this will force the browser to use the css-style instead of the wrong inline style.

Upvotes: 8

Related Questions