Images with border effects and onclick – IE problem

These days I’m working on an Ajax driven photo customization UI where the user can select from a range of frames that they can put on the photo. In the middle of the page is their photo, and in the right corner there’s a scrollable table with frames (2 in each row).

Everything’s hunky dory until I decide to add a border effect on frame images, so that on mouseover (or hover in CSS) the border increases (pretty standard stuff). I go ahead and add the following in the stylesheet and code respectively:

CSS:
img.frame {
border:#80A7D2;
border-width:1px;
border-style:solid;
margin:3px;
}
img.frame:hover {
border:width:2px;
margin:2px;
}

HTML:
<img class="frame" src="foo" alt="bar" onclick="doStuff()"/>

Problem
This gives me a nice border effect and the onclick of the <img> works as expected in FireFox. But when I verify this in IE, there’s no border effect whatsoever.

Solution Part 1
So I look at some legacy code elsewhere in the application, because there are areas in which this border effect is being used (albeit slightly differently), and what results is an encapsulation of the <img> tag with an <a> tag. The style is also changed to apply it to the anchor instead of the image:

CSS:
a.frame_holder {
border:#80A7D2;
border-width:1px;
border-style:solid;
margin:3px;
display:block;
}
a.frame_holder:hover {
border:width:2px;
margin:2px;
display:block;
}

HTML:
<a class="frame_holder" href="#"><img src="foo" alt="bar" onclick="doStuff()"/></a>

The border effect doesn’t work unless you set the display type to ‘block’. Another problem is the href=”#” which scrolls the page to the top if you click the link. Now that’s perfectly acceptable if you’re going to another page on clicking the link, since the scrolling never happens. But while using Ajax, you don’t want the screen to be scrolling to the top in the middle of an action.

Solution Part 2
What I eventually did was to replace the href=”#” with href=”javascript:;”, which is basically an empty line of Javascript. This stops browsers (tested on FireFox, IE 6 and Safari) from scrolling to the top.

So I end up with
<a class="frame_holder" href="javascript:;"><img src="foo" alt="bar" onclick="doStuff()"/></a>
instead of
<img class="frame" src="foo" alt="bar" onclick="doStuff()"/>
to make it work in Internet Explorer 6 (I have yet to test it on IE 7 *crosses fingers*).

UPDATE
Added reference to ‘javascript:;’ in the href attribute instead of ‘#foobar’. Thanks to Wade for reminding me. I was pretty green when I wrote this post, am a lot wiser now 🙂

Advertisements

7 thoughts on “Images with border effects and onclick – IE problem

  1. Thanks for the heads-up!
    I’d never seen this as an IE problem, but a CSS problem I’d need to provide a hack for.
    Great post and site, Jaffer.

  2. Osama A. says:

    Jaffer,

    Its great you’re writing about these things from Pakistan (are you in PK?)

    If you’re in Islamabad I’d like to meet with you to talk about what we’re doing — might be some common parts of interest.

    Osama.

  3. Tahir says:

    Thanks, man… huge help! IE sux!

  4. Wade A. Tisthammer says:

    You don’t actually need to use a # for the href if you don’t want antying to happen. You can always do href=”javascript:;”, since it’s a “do nothing” javascript command.

  5. Yup Wade, you’re right. I’ve been meaning to add that to the post … let me do it right now …

  6. Do you thoughts only repost this specific onto my own
    site? I’ve to guarantee credit history is offered where it’s owing.
    Have a very good just one!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: