Hicks

You’re reading all articles on The Hickensian tagged 'internetexplorer'

Providing CSS for just Internet Explorer

(Disclaimer – although this didn’t turn out to be the valid replacement for the underscore hack that I hoped it was, I thought I’d leave the post here as proof of what happens when you don’t check your facts thoroughly enough. Or more specifically, when you’re so tired, that you confuse a vaild HTML result to be valid CSS – hey ho!)

Today, I had one of those little CSS accidents, which led me to discover that an easy way to provide css for only IE (PC and Mac 5, 5.5 and 6) is to simply to add a comma after the the selector, but before the opening brace:

div, {
	width: 80%;
}

Mozilla, Opera and Safari ignore the rule. It validates too!). I hope this is useful to someone.

The fact that IE 5 Mac applies the rule as well, could reduce its usefulness. If you have time, please test it further and let me know your results.

IE Whitespace Bug

Its been a sort of Holy Grail for me (well maybe a Holy Teacup) to find a solution the IE Whitespace bug. If you’re not familiar with this, then you probably haven’t applied display:block to links within an unordered list. Adding this CSS property creates a solid ‘button’ out of what would’ve been a humble inline link, one that can be sized and prettied up as you like. The trouble is, IE windows adds another line height between all these links – unless you remove every bit of whitespace from the HTML.

So, in effect, there is already a fix to this, but it’s not a convenient one. Editing a menu that’s all on one line isn’t my idea of an easy life. Each time I would have to take the file into BBEdit, reformat the code to be ‘Gentle Hierarchal”, make my edits, and then reformat as ‘compact’.

I’d tried various fixes, one that added a negative top margin (overruled for decent browsers by using a first-child selector) worked in 5 & 6, but not 5.5. Then I started dreaming up some php that would strip the whitespace at the server side, but that was too much for my small head.

Now, excuse me if I’m late to the party, and everyone has already discovered the solution to this, but its actually rather simple. Here’s a cut down example:

ul a {
	display: block;
	float: left;
	clear: left;
}

Suddenly, IE 5+ does what it should, and the ones that got it right in the first place just put up with it without a fuss apart from Mozilla. If you find that the menu items are all over the place, add something like this:

li>a {
	float: none;
}

The first-child selector means that IE won’t see this rule, but everyone else will.

IE 5 Mac notes

Some IE 5 Mac things I recently discovered:


  • IE 5 Mac won’t float a bunch of <div>‘s, <ul>‘s etc. unless you specify a width for them.

  • When I applied the Tom Gilder image replacement method to elements such as the site logo, Safari added a huge horizontal scrollbar (presumably 1000em wide). This only seemed to happen when the image was within nested divs, positioned absolutely. To get around this, all I had to was add overflow:hidden.

    The reason that the image wouldn’t then show in IE5 Mac, was this extra overflow:hidden rule. As this isn’t needed in all cases, it can added as needed using the commented backlash hack:

    /*  IE 5 hack \*/
    #logo a {overflow: hidden;}
    /* end hack */ 

    My copy of Panther still hasn’t arrived, so I haven’t been able to test whether this is ‘fixed’ in version 1.1. I say ‘fixed’ as I’m not sure this can called a bug.



*Update – this is no longer a problem in Safari 1.1. Huzzah for that, but 1.1 is so far only available to Panther users.

multiple versions of IE

Everyone’s linking to this, and normally I stay away from repetition of other blogs, but this is far too useful.

As you all know, one of the biggest problems with testing sites on a PC, is that Windows only allows one installation of IE. However, a recent tutorial explained how the patent-friendly version of IE 6 inadvertently provided a way around this. By altering the installation files for IE 5 and 5.5, you could have the 3 last versions of IE on the same PC!

So here comes the really useful bit. Ryan Parman has done the work for you and created standalone versions of IE 5 and 5.5 ready to download. Get them while you can, they may not be up for long.