Hide outline border on A tag focus

Thursday, October 15, 2009

Filed under: HTML and CSS, jQuery, javascript, web-development — Tags: , , , , — Dmitri @ 09:01

When you focus A tag or submit button sometimes outline border looks ugly on websites. Here are examples:
Foobar toyota

This can be easy fixed (for all browsers except Internet Explorer!) by adding 1 line of CSS rule:
a:focus { outline: none; }

IE has non-standard HTML attribute hideFocus=”true” to solve this problem. Of course you don’t like to put this attribute in every <A> tag and submit buttons in your HTML. I have 2 working solutions for all browsers:

CSS expression solution

input, a {
  outline:expression(hideFocus='true');
  outline:none;
}

jQuery solution

$("a, input").each(function() {
  $(this).attr("hideFocus", "true").css("outline", "none");
});

Internet Explorer intepolation mode for images

Wednesday, February 11, 2009

Filed under: HTML and CSS, web-development — Tags: , , , , — Dmitri @ 15:09

Every self-respecting web-designer and web-developer know that when scaling images browser makes picture smaller or larger by definite “magic” algorithms. All browsers except IE, do that much-less correctly.

In Internet Explorer you should setup that algorithm manually as CSS property.

img { -ms-interpolation-mode:bicubic }

So here is result, screenshot are taken in IE7 with
image scale about 50-60%.

Without algorithm
Bicubic algorithm disabled (default)

Without algorithm
Bicubic algorithm enabled

Read more on MSDN website about this issue.

Enabling interpolation algorithm is useful for any kind of *boxes like Fancy Box, Shadowbox, Light Box, etc…

NB! Enabling algorithms can decrease IE’s performance up 2 times!
Nice joke, BILL!

© 2008 Dmitri Smirnov