AWP Reset

We’re all pretty familiar with the concept of a reset.css file to level the playing field across browsers. The work done by Eric Meyer has greatly enhanced the consistency of cross browser development.

Subject Matter
Development

Author

Published
September 30, 2010

Share
Facebook Tweet

At AWP, we have taken it one step further and implemented some other useful css nuggets into our awp-reset.css.

Cursor: pointer;

It’s surprising how often this gets overlooked. When you change the border and background properties of an input[type=”submit”], most major browsers discard the default cursor: pointer. This simple line ensures that this accessibility feature does not get lost:

a, a *, input[type="submit"], input[type="button"] {
  cursor: pointer;
}

Inputs and Buttons

Firefox comes with some unique pre-styled features on submit and button inputs. For cross browser evenness, the following code levels the playing field:

button::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner{
  border: 0; padding: 0;
}

Consider the following example:

<style>
input[type="submit"]{
border: none;
padding: 0 8px;
background: #00F;
color: #FFF;
height: 24px;
line-height: 24px;
font: normal 12px Arial, sans-serif;
}
</style>
<input type="submit" value="Submit One" />

Results:

FireFox:FF-bad

Chrome:Chrome

IE8:IE8

With the reset code from above:

FireFox:FF-good

Although they are not 100% identical, you can clearly see we are now all speaking a much more similar language.

Textarea Resize

There are only specific times when a resizable textarea is useful. Most of the time, your textarea size should remain the size you specified. We shut this off in the reset:

textarea { resize: none; overflow: auto }

To turn it back on, use the following syntax:

resize: none | both | horizontal | vertical | inherit

Also, note the overflow: auto. This removes the annoying default scrollbar IE injects into textareas.

Bicubic image interpolation

Have you ever noticed that IE horribly distorts images when resized using html/css?? The following line fixes the issue and renders a much less pixelized “on-the-fly” html/css resize:

img { -ms-interpolation-mode: bicubic; }

Conclusion

There you have it! A little more robust, but not terribly obnoxious, bit of code to help level the playing field amongst browsers. Enjoy!