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


Webstandards with Blue Beanie Day

Just a little heads up, and note to self – today is the Blue Beanie Day 2007 . A great way of preaching the way of the web standarista. The Blue Beanie Day is an event created by the Designing With Web Standards group on Facebook, a group so good almost worth joining Facebook for in itself.
Attending is easy, just snap a photo of yourself wearing a blue beanie. Or bluish headcover if you don’t want to be picky. And upload it to the Flicker Blue Beanie Day 2007 Pool, and change your profilephotos and avatars on whatever and any other social network you are part of.

Unlocking another iPhone

I unlocked my own iPhone a little while ago, following a lengthy tutorial. Today I unlocked another one, but this time I decided not to go the lengthy connect/disconnect and SSH and so on route.

All I needed was following the instructions on iphone.unlock.no. This let me do everything directly on the iPhone without ever connecting it to iTunes. That means

  • jailbreaking
  • installing Installer.app
  • unlocking the SIM-lock
  • Enabling international menu

I did run into one problem though. When running the AnySIM application to unlock the SIM-lock the first time I left the original AT&T card in. Using my own card afterwards did not work very well. I went through the process of “virginizing” the phone, reinstalling the 1.1.1 software through iTunes and did the whole routine from scratch again. This is all also explained on unlock.no.

The second time around things went better, but this time the anySIM unlocking got stuck in the process, not finishing the loading bar. A click on the home button brought up the springboard though. Using installer.app I installed BSD Subsystem from the System category. This made the iPhone working happily.

Too sum up, unlocking went reasonbly well, even though it took me almost 2.5 hours witht he extra fiddeling around. That still beats my previous 4 hours spent unlocking. If you do it right it shoudn’t take more than 30 minutes. So – follow the instructions on unlock.no exactly, BUT – before unlocking the SIM-lock make sure you have got

  1. BSD Subsystem installed
  2. Your own SIM-card inserted, not the AT&T card.

One last thing not to confuse with all the unlocking being mentioned, is that some SIM-cards have their own PIN-code which you must enter in order to use the phone. When the iPhone prompts you to unlock SIM (3 attempts allowed) go ahead and unlock, this has nothing to do with the actual unlocking of the SIM-lock, but it’s to let the phone use your SIM. Confusing I know.

Happy unlocking.

IE6 magic bullets

Things that sometimes “magically” make Microsoft Internet Explorer 6 behave like expected from modern browsers.

  • position: relative
  • zoom: 1
  • height: 1%

They are all due to Microsoft’s proprietary concept of hasLayout.

Feel free to add any other magic bullets in the comments.

Font rasterization in Windows XP

If you are on Windows XP1 and have upgraded to Internet Explorer 7, you know, the Internet with glossy buttons, you’ve perhaps noticed that the text looks a slightly smoother then before? That is because in IE7 Windows’ ClearType is enabled by default. You can do this systemwide if you like it. And if you for some unknown reason to mankind prefer IE6 you should do yourself a favor and follow these settings.

  1. Click “Start” and open the Controlpanel.
  2. Doubleclick the Display icon to open the Display settings panel
  3. Select the Appearance tab
  4. Then select the “Effects…” button
  5. Make sure the checkbox next to “Use the following method for font smoothning…” is checked 2
  6. Select “ClearType” from the dropdown
  7. …and click OK, and then enable or ok again

That’s it. You’re done. Now your eyes will thank you for making it less stressfull looking at the screen all day.

If you want to know more check out Wikipedias entry on font rasterization.

  1. None of this applyes to Windows Vista, as it is enabled by default. But feel free to correct me.
  2. My version of Windows XP is in Norwegian, so my translations are likely to be somewhat off from a English version.

To <abbr> or <acronym>?

I believe the easiest way to differentiate them is to use <acronym> if you can speak it like a word, not spell them out like a group of letters. We say “ray-dar”, not are-aay-dee-ayy-are. So we get <acronym title="Radio Detection and Ranging">Radar</acronym>.

If spelling them out letter by letter it’s an <abbr>, like this <abbr title="Cascading Style Sheets">CSS</abbr>.

Thank’s to this comment on a old thread at evolt.org for cutting it clear.

Offcourse, Microsoft has decided not to support the abbr element in its browsers …

Some other resources for further discussion:

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.