Control form button width in IE6

I’m working on a project with shiny, happy submit buttons all over the place. To offer more control over the presentation, we are using the form button element and inserting images inside the button tags.

...

Now, you need to over-ride some pretty ugly default presentation styles:


form button {padding:0; margin:0; border:none; background:0;}

This works fine and dandy until you get to IE6. The buttons tend to get really large with IE. So, you need to re-define the width of the buttons and apply overflow:visible. Here’s the entry in your IE6.css file:

form button {width:1%; overflow:visible;}

Resources

Special thanks to Jehiah Czebotar for saving me a bunch of time trying to figure this out.

Get rid of the dotted lines on links with image replacement

Update 2-26-2014

This is obviously an outdated article. Please do not follow the older advice on using outline:none and hiding focus. We need to provide some visual cue that a user has placed their focus on a link or button via the keyboard. The key is not to hide focus, rather to avoid generating the marching ants that went off screen with older methods of image replacement. The key is hide the text while not pushing it off-screen. Thierry Koblentz’s article Clip your hidden content for better accessibility is the gold standard on using hidden text while avoiding the off-screen outlines and making your site global-ready.

If you do decide to use outline:none, you must make sure that you re-define the focus style. This is normally done by duplicating the :hover style

:hover, :focus, :active {
    text-decoration:underline;
}

Original post

I don’t remember where I first found this tip (Hedger Wang?), but it’s a good one. If you are using image replacement, i.e. background images and negative text-indent, you may notice a dotted line appear when the link is clicked and waiting for the page to change (:focus). It’s outlining the text that happens to be wayyyyy off screen. It’s easy as pie to fix this issue.

CSS Fix

This will fix the problem in Firefox. Just drop this into your global.css file.

a:focus {
    -moz-outline-style: none;
}/*this avoids having image replacement sections display a dotted outline*/

JavaScript Fix

This will fix the issue in the other browsers.

var theahrefs = document.getElementsByTagName('a');
//fix dotted line thing when link is OnClicked
for(var x=0;x!=theahrefs.length;x++){
    theahrefs[x].onfocus = function stopLinkFocus(){this.hideFocus=true;};
}

Ugly Amazon Ads

Apologies to anyone seeing ugly Amazon ads in this site. I’m using their affiilate program to highlight web programming books and sometimes Amazon delivers hideous flash ads that are not related to the books. If this continues, I will remove them permanently. I didn’t sign up for ugly flash ads. You should be seeing the book cover, the cost of the book, and a link to purchase it.

Update Your JavaScript Libraries

JavaScript libraries are a blessing to those of us that feel overwhelmed by the code. If you’ve used Prototype, Rico, Yahoo’s YUI libraries, or others in the past year, don’t neglect the versioning. These scripts get updated to fix bugs and add features.

I’m working on a project that had some annoying errors that were quickly fixed by simply upgrading to the most recent version of a YUI library object. Set yourself a reminder in Backpack or Thunderbird to check your sites every 4-6 months for updates, it’s an easy way to keep up to date.

CSS Naked Day tomorrowTODAY!

We’ve had a number of CSS re-boots to show off our fancy CSS coding skills. Now it’s time to strip the layers off and show the bones of your code. April 5 has now been declared the official CSS Naked Day. Sites around the world, including this one, will shed the protective cover of CSS and expose their underlying semantic coding to the voyeuristic eyes of programmers.

Have fun everyone.