MSIE CSS zoom (and -ms-zoom) property

Even when you’ve used conditional includes, there are often cases where MSIE just will not cooperate with your CSS manipulations. In those cases, it can often be attributed to the hasLayout property of the element. To correct this quirk, setting zoom:1; will often “convince” MSIE to work in the way you expect it to (like other browsers!)


<style type="text/css">
.someclass {
/* your CSS definitions */
zoom:1;
}
</style>

REFERENCES:

Prevent resizing of HTML textarea in browser

Newer versions of Webkit based browsers (Safari & Chrome) as well as Firefox now allow users to resize HTML <textarea> elements by default. This can have unpredictable results on your user interfaces. Thankfully, you need only add a simple CSS attribute to prevent this newly default behavior.

textarea {resize:none;}

REFERENCES:

HTML FORM’s unexpected effect on layout

I was recently looking back at some websites I’d created years ago and realized just how much of a hastle the HTML FORM tag used to be for page layouts.   This generally resulted in non-valid markup where the FORM tags themselves were improperly nested in TABLE, TR and TD tags.

Other than the obvious accessibility and semantic markup issues, there are two specific items that must be realized about the layout when working with a FORM.

The following examples assume the following source:

Hello<form>Again</form>World

FORM is a block element, forcing content around it to be separated:

Example displays as:
Hello
Again
World

  • FORM generally has a bottom margin to push content down below it.

Example displays as:
Hello
Again

World

  • CSS can fix both of these cases depending upon your specific problem:

<style type=”text/css”>
form { margin-bottom:0; display:inline; }
</style>

Example displays as:
HelloAgainWorld

 Cheers!