Category Archives: webdesign

Positioning and z-index in IE

Using absolute positioning to hide and show a nested list is one of the better ways to create a dropdown menu, and it can almost be done using only CSS. IE6 needs a little javascript help to respect the :hover pseudo-class. The Sons of Suckerfish will help you there.

Now you have your perfect semantic validating SEO friendly nested list in order to make the drop-down menu the client wants. The CSS is in place and the dummy you’ve thrown up works.
But when you implement it into the site the drop-down partly hides behind the content further down. Offcourse – it has an higher z-index. Easy fix. But then the juggernaut IE comes along and crashes the party.

Continue reading

My bad

I’ve been stuck on a piece of CSS lately, simply couldn’t get the :hover to work on an anchor <a> element, in IE6 offcourse. Setting the positioning, the positioning of the container element, floats, z-index’s. All to no use. In the end I gave in and posted my problem on css-discuss. This is the reply I got:

This is the trouble line: <a class="link">Les mer<⁄a>. For an anchor tag to take effect, it has to have the href=”” attribute set, otherwise the link won’t fire and it seems that IE6 isn’t
acknowledging your <a> tags without href, hence your lack of :hover effects.

What a headslapping moment. I was so fixated on the problem being with IE6, that I didn’t realize the problem was in the chair.

Webdeveloper tools for IE

Firefox has all the plugins you can poke a stick at, but what to do when IE is doing its “thing”? Windows Explorer plugins to the rescue!

Westciv’s XRAY is a javascript bookmarklet that lets you click on items in your webpage and view some of the CSS information regarden the area you’ve selected.

Microsoft has their own IE Developer Toolbar that is similar to the Firefox Firebug plugin. It lets you inspect and alter the DOM, change settings, outline elements, find CSS etc.

That should make the bughunt slightly easier for everyone.

Update: I’m running multiple IE’s, and as a result (I assume) the webtools only work in IE7.

HTML tidy for Firefox

The HTML Tidy plugin for Firefox is a great little tool when viewing other webpages’ source. It shows any errors, where they are, and what they are. It also has a clean-up function for those pesky unreadable CMS made html codes, making it easier for the human eyes and brain to read.

If you’re on Windows you’ll get HTML Validator off the Firefox add-ons page. For some reason Mac-users must do a slight detour, which I found after some googling. Go to the HTML validator sourceforge index page, and find the file called tidy_macintel_xxxx.xpi on the date of 26-Oct-2006. That’s spesificly for the new Intel-Macs, but you’ll find any other version you’re interested in on the same page.

It’s a great companion to the Web Developer Toolbar and Firebug.

Update: The Mac-file I’m referring too is for Intel Macintosh’s only! The filenames on the sourceforge page gives you a fairly straight forward clue to which OS and make it’s for, so remember to read before installing.

If you try to install the macintel on a G5 or earlier Mac it will cause Firefox to completely give up on you. The fix is then to export your bookmarks, delete Firefox, re-install. And then start adding all the extensions you’ve lost in the process.

How to install multiple versions of IE

Every web designer hates it, but the world loves it. So we’re forced to spend money, time, as well as suffer hair-loss over it. It’s Microsoft’s Internet Explorer. Thankfully I’m working on a Mac, and for the last year I’ve been testing for IE6 in Parallels running Windows XP sp2. But when IE7 came out I was forced to make a choice. Since there is no way to run two versions of IE on Windows
(why!?) I was forced to ditch IE6 in order to test in IE7.

Or was I? Thankfully an enterprising soul developed a standalone version of IE7 that would run next to IE6. But IE7 was buggy, at least for me it was. I ‘m no Windows wizard, so the problem could easily have been my XP installation, not IE7. So yesterday I pulled the plug on XP and reinstalled a fresh version *cough* demonoid *cough*. Saving me a nice 5GB of hard-disc space in the process. And it went surprisingly smooth. Perhaps because I always expect the worst possible outcome when dealing with Microsoft software.

Do this:

This installment came with IE7 as it’s default browser. Not a problem, the entrepreneurs have been busy bees and launched a full pack of standalone Explorers, including IE3, IE4, IE5, IE5.5 and IE6. I installed all of them, mostly out of curiosity towards how the older ones would behave.

One problem arises though. They didn’t support png transparency. Yes yes, only IE7 does that. But there are plenty of ways to make at least IE6 support this. But not the included version of IE6. This comment shows how to fix this though. He suggests downloading IE6, unzip it, find two files and replace them in the IE6 folder you already have. If you are a keen web designer and like to serve the majority of the interweb users nice semi-translucent 24bit png’s, and don’t mind spending lots of time hacking your stylesheets this is what you have to do:

  1. download ie60.exe at http://browsers.evolt.org/download.php?/ie/32bit/6.0/ie60.exe
  2. don’t run the exe, just unzip the contents and look in the IEW2K_3.CAB file
  3. locate dxtmsft.dll and dxtrans.dll
  4. place these in the IE6 directory

Note that you’ll need the full version of WinZip, not just the unzipper package. The 45 day demo was good enough for me. There’s a testpage link in the original post as well. Good luck!

The Web Design Survey

I took the web design survey 2007Just one week left of the web design survey 2007 over at the folks at A List Apart. If you’re a part of the web designing/developing/fill-in-blank community head over and do the same. It will take 9 minutes of your time, and you might just get yourself a new iPod. But it’s not just for adding more stash to your evergrowing pile of gadgets. Hopefully we’ll learn something about our profession, what an average web designer thinks of himself, what our rates are and … just fill out the survey will you?

The Z wants me

I’ve never seen a better workrelated reason to leave Norway. My dreamworkplace has a position up for grabs, but it ain’t gonna be for me. Instead of putting a list of crappy excuses, I’ll say that it’s to do with my current geographic location to these:

I. Want. This!

Now excuse me, but I have a portfolio to work on.