Wednesday, September 9, 2009

Background positioning for <a> on IE6, IE7

Suppose you have a link button graphic that has both the off and on states (e.g., the 50 x 50px "off" image is on the top half and the 50 x 50px "on" image is on the bottom half, resulting in a 100px-tall graphic). It's easy to style the link's hover effect by changing the background-position from "left top" to "left bottom" (also needs the link to be a block element, say display:block or display:inline-block). This works great on Firefox and IE8.

Normally, this works on IE6 and IE7 also, but make sure the <a> has the "href" attribute, otherwise these browsers won't change the background position.

No comments:

Post a Comment