Javascript&CSS

Today, while working on a webpage, I wanted to implement a feature where a background image is applied to a li element on mouse over, and removed on mouse out. Implemented using JavaScript: if(action == 0) { btn.style.backgroundImage = "url(images/index_nav1_07.jpg)"; btn.style.backgroundRepeat = "repeat-x"; } else { btn.removeAttribute("style"); } I found that this worked for Firefox and Internet Explorer, but the mouse out action did not execute in Chrome. I then discovered that Chrome might not support removeAttribute(), so I added a compatibility fix: ...

In Firefox or IE browsers, when you click on an <a> tag, a dotted outline appears around the tag (as shown in the image), which affects the aesthetics. To solve this issue for IE browsers, add hidefocus="hidefocus" to the <a> tag. For Firefox browsers, the solution is to add the CSS property outline:none