I have just had a very strange issue with a bug where IE8 seemed to not respect its opacity when fading in. The element would appear straight away even though it’s siblings would fade in gradually. The issue seemed to be around position:relative, which was absolutely needed for the element that wasn’t fading in.
In the end, after a quick google search, I found that someone else had experienced this issue and found that the fix was to use filter:inherit; on the element, which sorted it out straight away.
This is the first time I have come across this issue, and what surprised me was the fact that it didn’t occur in IE6-7.
Rather than keep saying, I must write a post on my blog, I think that I tonight I will finally just post a quick update to say that I have moved jobs – I now work as an Interface Developer at LBi. It’s really good so far, and learning loads, so I really should write more about all the things I am picking up. I’ll get back in to updating this site regularly again now (and finishing off the design!)
Here is a very quick fix for a common issue with HTML emails in Hotmail that catches some people out (even Microsoft I guess!) You see the white lines under the images? – Well, in order to get rid of it, just add “display:block” to the image. This will get rid of the white space and allow the image to display as intended.
I think that this is caused by hotmail not setting images to display: block; in its style sheet, which means that the images are set to inline, and thus respecting relevant line-heights. and the inline level elements are reserving space for descender characters like ‘j’ and ‘g’.
I have recently purchased a Kindle with a view to reading all my starred tech articles in my google reader list. I did it on my phone for the past 6 months, but found that it just gave me eye strain. Anyway, here is how you can read any article you find offline on your kindle (and smartphone) when you are deep underground without the distractions of the internet…
Look on the site for the bookmarklet, which is grey and says “Read Later”. Drag this into your bookmarks toolbar.
Surf that Interwebs, son…
When you find an article that you want to read later, simply click on the “Read Later” bookmark.
When you have sevaral articles that you want to read, simply go to the Instapaper site and click on the kindle icon. This will produce a .mobi file which you can then save directly onto your Kindle, as you would any book.
Now when you are somewhere really boring and have no possible access to the internet, you can catch up on your tech reading!
If you want to read your Instapaper articles on your smartphone, you’ll be able to download an app which will give you very easy access to all your stored offline content. A decent alternative to Instapaper on the Android platform is read it later, but I have read that this doesn’t handle Kindle articles as nicely. I personally have both bookmarklets on my toolbar and save to both services for times when I don’t have my Kindle with me.
I have been writing code for IE6 for a number of years, and was lucky enough to never come across this bug before (But luckily, I had read about it…). I was working on styling up a definition list when I noticed that the 7px margin was looking larger on IE6 than it was on all the other browsers.
I smugly thought to myself that this was the double margin float issue that I had seen before, and all I needed to do was add the usual display:inline; to the element and carry on feeling smug, but on refreshing the page I noticed that the fix was working. This was not going to be the easy fix that I thought.
I tried going through several more fixes that I thought I could try, and then made a stand alone test case. I took screen shots and measured the amount of pixels that the elements were out by, when I noticed that it wasn’t doubled, but only out by 3px. At this point, I thought it was probably the “3px jog bug”
A fix for this without adding any extra conditional statements in your ie6 stylesheet is to float both neighbouring elements, but in this case for the design, it wasn’t possible so I had to remove the 3px by adding a different margin amount for IE6. Not an ideal fix, but it would have to do.
I thought it was quite amazing how I have not actually come across this issue until today, given the amount of pages I have designed!
Here is Peter’s talk from a couple of weeks ago. I thought that this was one of the most enjoyable talks at the meetup that I have seen so far. Peter really knew his stuff.
I haven’t ordered Andy Clarkes new book yet, as my first order was cancelled by Amazon (at a very nice £22), but seeing this demo almost made made me want to pay the slightly high amount of £32+ delivery for it right now.
Here is the demo, Madmanimation. Take a look in Safari first, and then load it up in IE8 to see how it degrades really well with text describing what happens in each scene.
