Modern browsers means advanced users

Today I wrote this bit of code which I was quite pleased with:

input[type=submit]{display:none;}

This is targeting the sign up button on an email subscription form. Not every browser will understand this, so IE6 for example will just ignore it. For my purposes this is fine. My logic is that people on IE6 probably need the submit button anyway, whereas those who use more modern browsers which will understand this declaration will also be familiar with the fact that hitting enter will submit their form. An unusual approach to progressive enhancement maybe, but it made me happy…

Posted in CSS

Testing in old versions of Internet Explorer

When you are laying out websites, testing in different versions of IE is really important, but also really hard, as when you install an new version it writes over the top of the old one, so you can’t have two side by side.  For a long time Multiple IEs was a good way round this problem. Of course it’s no replacement for a real test machine (or virtual machine) but it’s a useful tool for developers to do some quick checks. However javascript support is notoriously bad, and it is gradually going out of date, so we have started using spoon which is a great replacement.

But now the new firewall settings have blocked us from using this. Back to square one. Then I remembered a tool that I have used in the past that did something like multiple IEs but was much better. It took me ages to find it again, so I am blogging so that I don’t forget and maybe someone else will find this too. The tool is called IE Collection and it does a great job.

Internet Explorer ignores display: block;

Today I have spent a lot of time investigating a bug in Internet Explorer (it still seems to be there even in IE8). Basically I have an image, part of which needs to be a link, and I can’t use an image map, so I thought I would position the link over the top of the image and set the width/height of the link to match the area that I want the link in. Something like this:

<a href=”http://get.adobe.com/flashplayer/&#8221; style=”display:block;height:23px;position:absolute;right:88px;top:44px;width:164px;z-index:1;”><span style=”display: none;”>Click here to download the latest version of flash</span></a>

For accessibility reasons I put a span inside the image containing text to say what the link did, and then hid this with display: none. This should work fine. Indeed it did work fine in Firefox, but the problem was IE8 (and 7 and probably all of them). In fact this code works fine in IE when in isolation. However when on the page there was obviously some conflict with something else because for some reason IE was ignoring the display: block declaration on the link – if I allowed the text inside it to be displayed, then it worked like a link, but only as an inline one, not a block.

I fiddled around for a long time and was unable to find anyone else who has had this problem, or any good solution so in the end I resorted to setting a transparent background image on the link like this

<a href=”http://get.adobe.com/flashplayer/&#8221; style=”background: url(transparent.gif);display:block;height:23px;position:absolute;right:88px;top:44px;width:164px;z-index:1;”><span style=”display: none;”>Click here to download the latest version of flash</span></a>

Not very pretty I know but it does the job. Hopefully this helps someone out. If you can explain this bug I would love to hear from you!

Posted in CSS

CSS Systems

I design a lot of websites, and write a lot of code to make them look nice. This is written in a language called CSS. There are lots of ways of doing this and some are better than others. Today I found a great presentation about managing CSS. There’s a lot great tips in there. If you are interested in CSS then this is a great read.

Posted in CSS