Ever since I upgraded to IE11 my Skype is throwing error
Digging deeper – the error is throwing while Skype is attempting to display an ad banner
So not only when Skype came into Microsoft possession it stated to display banner ads – in doing so it relies on Internet Explorer and it’s not compatible with the latest version.
How stupid is that?
CSS has a cool selector called “:active“, it can be used for example to select a button when it is pressed. Let’s say you have an HTML markup like this:
<input type="button" class="mybutton" value="Click me" />
and you define CSS selector like this:
.mybutton:active {background-color:red}
the button will change its background color to red when clicked and only for the duration of the click (while the mouse button is down) as soon as mouse button is released – background color is reverted to original.
This works fine in all modern browsers and supposed to work in Internet Explorer since version 8. And it works – well kind of – only you click the button but not the button label (text of the button). If you click actual text – style does not change.
Weird, but with IE weird is often normal. To alleviate the problem use button HTML element instead of input:
<button type="button" class="mybutton">Click me"</button>
With this markup CSS described above works universally.
Of course if you need to target browser below IE8, CSS selector approach does not work, you have to resort to JavaScript:
<input type="button" style="background-color:white" value="Click Me" onmousedown="this.style.background='green'" onmouseup="this.style.background='white'" />
If you’re using Infragistics UltraWebGrid in Internet Explorer 8 you may experience strange visual (and other) issues if you have page compatibility set to emulate IE7, e.g.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Issues can range from column moving not working to weird distortion in grouped mode. According to Infragistics this combination is not supported as “unstable”, but you can still make it work.
Infragistics keeps internal flags of what browser is currently in use: ig_shared.IsIE7, ig_shared.IsIE8, etc. The trick is to detect IE8 and make it fall back to IE7:
if (ig_shared.IsIE8) {
ig_shared.IsIE8 = false;
ig_shared.IsIE7Compat = true;
}
Place this code on top of your page JavaScript code and when it sees IE8 it will tell grid to use IE7 rendering. This is most definitely a hack, but it works.
Let’s say you have created an HTML table with following markup:
<table id="xMyTable" style="width:100%;">
<tr >
<td style="vertical-align:top">
<div style="border: 2px solid black; background-color:red; height: 100px;">
</div>
</td>
<td style="vertical-align:top" rowspan="3">
<div style="border: 2px solid black; background-color:orange; height: 600px">
</div>
</td>
</tr>
<tr>
<td style="vertical-align:top">
<div style="border: 2px solid black; background-color:green; height: 100px">
</div>
</td>
</tr>
<tr>
<td style="vertical-align:top">
<div style="border: 2px solid black; background-color:blue; height: 100px">
</div>
</td>
</tr>
</table>
It’s very basic, one rowspanned cell that holds a content with large height on the right and 3 corresponding cells with content of smaller height on the left. You’d expect it to look like this:
Unfortunately as is it works only in Google Chrome. In the rest of the browsers, including Interned Explorer and famed FireFox it looks like this:
What happens is browsers automatically spread spanned cells height to evenly fit height of the cell with rowspan. To rectify this situation we need a little help from JavaScript. Continue reading →
Internet Explorer offer CSS elements to style scrollbars, for example class
.FlatScrollbars
{
scrollbar-face-color: #f0f0f0;
scrollbar-shadow-color: silver;
scrollbar-highlight-color: silver;
scrollbar-3dlight-color: #f0f0f0;
scrollbar-darkshadow-color: #f0f0f0;
scrollbar-track-color: #f0f0f0;
scrollbar-arrow-color: #000000;
}
applied to a DOM element will render nice flat scrollbars:
Yes, it’s not standard CSS, but other browsers offer similar extensions (WebKit, I am looking at you). So, it works nice and well, but what if you want to style scrollbars of an IFRAME? Continue reading →
If you tried to use Infragistics classic UltraWebMenu control in IE9 you may experience issue (even in the latest version, 11.2 at the time of this post) whereby menu items don’t change background on mouse hover even though background is specified in menu’s HoverItemStyle property.
The solution is specify BorderStyle in HoverItemStyle. It can be any value besides NotSet, but the actual attribute has to be there. So for example if you want your hover style to have no borders and your original style looks like:
<HoverItemStyle ForeColor="White" BackColor="#81C0E9" Height="18px" BorderWidth="0px"> </HoverItemStyle>
change it to
<HoverItemStyle ForeColor="White" BackColor="#81C0E9" Height="18px" BorderWidth="0px" BorderStyle="None"> </HoverItemStyle>
I don’t know why border style affects showing of the background, but there you have it. Adding BorderStyle to HoverItemStyle will enable displaying of background color on hover.
onbeforeunload browser’s event fires when the window is about to navigate to another page or about to be closed. So why why would it fire when you click to call a JavaScript function that does neither of the two?
If your have your click setup similar to something like this:
<a href='javascript:doStuff()'>Click to do something</a>
or, if you’re using ASP.NET’s HyperLink control:
<asp:HyperLink ID="xhypMuLink" runat="server" NavigateURL="javascript:doStuff()"> Click to do something </asp:HyperLink>
And your “doStuff()” function doesn’t redirect or closes the window – you’d expect it just do its stuff and that’s it. But in addition to it, or rather before it onbeforeunload event fires, so if you have some code in the event handler – it will be executed, which in this case is undesirable.
Why does it happen? Continue reading →
I was working with classic Infragistics UltraWebGrid when noticed strange thing – even though scrollbars were enabled for the grid, the grid had fixed size and number of rows was bigger than the grid could display – no scrollbars appeared. For me it was a combination of grid being shown in a modal dialog in IE7 browser, but it could happen in other scenarios.
I also noticed when grid experienced any kind of user interaction (row added, row selected, checkbox cell checked etc.) scrollbars would magically appear. So the solution? Simulate user interaction. For example this code can be included in grid’s client-side InitializeLayout event:
function xMyGrid_InitializeLayout() {
var oGrid = igtbl_getGridById('xMyGrid')
oGrid.Rows.getRow(0).setSelected(true);
oGrid.Rows.getRow(0).setSelected(false);
}
What happens here is first row of the grid is selected and an instant later unselected. It happens so fast that there’s no visual indication. But the grid gets its “user interaction” and scrollbars appear.
Visited IE test-drive site in my Chrome browser today and was greeted with a cheery banner:
I guess that “Don’t forget to enable your partial hardware acceleration in the about:flags thingy…” is a veiled reference that IE9’s HTML5 is fully “hardware accelerated”. Still funny.
Update: Since Microsoft is abandoning their “native HTML5” party line the funny logo has been removed as well. Too bad, especially after comparing FPS on speed tests.
IE6 just won’t die. I know, continue to support it is a bad idea, but unfortunately many developers have no choice, some environments, especially corporate intranet will continue to use it until second coming (and then Safari will rule the world).
So, here is a small tip: If you need to use a named color from CSS3+ specification that old tired browser doesn’t understand – just use color’s hex equivalent instead. For example instead of
style="border: solid 1px LightGray;"
which will do nothing in IE6 use
style="border: solid 1px #d3d3d3;"
which will render nice light-gray border.