Tag: internet explorer

Posted on

CSS hacks (underscore and star) for old IE versions

Ideally it shouldn’t be necessary to provide different CSS for different browsers, but sometimes needs must, particularly when it comes to dealing with the quirks of older versions of Internet Explorer (i.e. IE6 and IE7).

Thankfully there’s a couple of simple hacks that can be used to target CSS at old versions of IE only – the underscore (_) hack for IE6 (and below) and the star (*) hack for IE7 (and below). Just put _ or * in front of a CSS property as required, e.g.:

color: red;   /* all browsers */
*color: blue;   /* IE7 and below */
_color: green;   /* IE6 and below */

Using these rules, this sentence should appear green in IE6 and below, blue in IE7 and red in all other browsers.

There are other hacks that can be used. Check out these blog posts for more:

CSS Tip: Targeting IE 5.x, 6 and 7 Separately

IE7 only CSS hacks: Explained

Posted on

Preventing IE from caching Ajax requests

We are increasingly using AJAX (Asynchronous JavaScript and XML) to deliver content on our pages, but often have problems due to Internet Explorer, every web developers favourite browser, caching AJAX requests. This means that the results presented are not updated when a new request is made to the same URL, even if the data has changed.

This is annoying, but does not go against the HTTP specification, which states that GET requests are cacheable, whereas POST results are not. AJAX requests seem to generally default to GET (JQuery certainly does), so IE caches them.

Therefore, the solution is to make sure that AJAX requests use POST rather than GET. In jQuery, you can do this by setting:

type: 'POST'

For Prototype, you can set:

method: 'get'

In the jQuery.ajax() method, there is also a ‘cache’ setting, which is true by default, but can be set to false, which prevents caching. It does this by appending a TIMESTAMP to the URL, so that each request is made to a different URL, so a cached result cannot be returned. If not using jQuery, an alternative to ensuring that your request is a POST request rather a GET request is to add a ‘cache-busting’ parameter, e.g. a timestamp, to the end of the request URL, e.g.:

var cacheBuster = new Date().getTime();  //Get timestamp
var url  = 'http://www.example.com/getdata?cb=' + cacheBuster;  //Add timestamp to URL
Posted on

CSS – display: inline-block in IE7

I was having some problems with getting the layout of the buttons for the JQuery Tools Scrollable Navigator plugin to work in IE7 for CSlide, e.g. https://learntech.imsu.ox.ac.uk/cslide/collections/index/87.

After a bit of searching I found this: http://fourwhitefeet.com/2009/02/css-display-inline-block-in-ie7/, so thanks to Cathy at http://fourwhitefeet.com.

It turns out that, in IE7, display: inline-block only works on inline elements, and I was trying to use it on divs. The trick is to wrap the content of these elements in an element that is natively displayed inline, e.g. span. For my purpose, I could just replace my divs with spans (they probably shouldn”t have been divs in the first place, but I’d mutilated the examples for Scrollable to gte where I was). It should also work by just adding spans around the content that you want to be ‘inline-block’, but inside the ‘block’ element, e.g.

<div><span style="display: inline-block">My Content</span></div>