A:Hover and IE – a trap for young players

If you’re having trouble getting your a:hover effect to work in IE you might want to make sure you have an href attribute on the anchor element. The hover effect won’t work in IE unless it does.

I had something like the following:

<a onclick="somejavascriptfunction()">Anchor text</a>

Changing to this solved the issue:

<a onclick="somejavascriptfunction()" href='#'>Anchor text</a>

It’s a bit embarrassing and I should know better. I hope this post helps other people avoid wasting time like I did.

MooTools slide effect and Internet Explorer CSS

Have you struck a problem with MooTools slide transition and CSS styles not appearing correctly in IE? I ran into this exact issue the other day where I was trying to slide a DIV element up and down based on a click event elsewhere on the page. The CSS style applied to the DIV looked something like this:

#slidingDiv {
    padding-bottom: 10px;
    background: white url(../images/box_bottom.gif) bottom no-repeat;

The problem seems to be that IE can’t calculate the height of content in the dynamically resized DIV correctly and thus the padding-bottom and hence my background image (nice rounded corners in this case) wasn’ showing.

The solution

The fix turned out to be simple enough, I just made the height of the DIV fixed in the CSS. Once IE knew how big the inner content was supposed to be everything started working correctly.

Book Review: CSS Mastery

var country_code = geoip_country_code();if (country_code != “GB”){document.write(“”);}else{document.write(“”);}
As a web developer I’ve had to do a certain amount of CSS development over the years but never really felt like I understood it. CSS can be a bit of an esoteric beast and I wanted something to clear the fuzz away.

CSS Mastery was the solution I had been looking for. Andy Budd writes in a clear and engaging manner and the book is extremely readable for a technical text. Andy starts by getting right back to basics covering the Cascade and the Box model in the first two chapters.

The book covers most aspects of CSS with concise and easy to understand examples used through out. Andy also spends a good amount of time on cross browser compatibility issues where appropriate, as well as including a whole chapter of hints and hacks on this topic at the end.

If you are just starting out with CSS, or like me have used it for years but never really understood it at a visceral level then I urge you to give CSS Mastery a try.

background-image position in IE6 with png images doesn’t work!

After spending about three hours hacking CSS and searching the web today I’ve discovered that IE6 doesn’t respect the positioning of your background-image if you are using png’s. Both gif and jpg images work as expected.

So if you’re wondering why something like this:

background: White url(../Images/promobox_bottom.png) no-repeat center bottom;

isn’t rendering correctly in IE6, try a different image type.