It’s much less expensive of an operation and WAAAAAAAAAAYYYYYYYYY easier to remember. You do this:

.myElementClass{
height:auto !important;
height:200px;
}

You know, in trying to wrap my brain around this, I’m still not sure why it works. Why wouldn’t the auto always kick in? But it doesn’t. It kicks in when the actual height of the element is is greater than the height you set for the min height. Go figure. Sometimes IE’s idiosyncrasies work to our advantage.

It’s called the Min-Height Fast Hack. I love that name.

I thought I’d try the same thing for min-width of my page, but it doesn’t work since the width of the page can be fluid.

1. Create a separate RTL version of your stylesheet that has direction:rtl on the body tag. This will be inherited by all the elements. [update: according to the W3C, you should put dir="rtl" on the html tag rather than direction:rtl in the css of the body tag.]

2. Flip your left/right values in the stylesheet.
If you declare something like margin-left, flip it to margin-right or vice versa.
If you use shortcut notation for margins and padding, flip the left and right values.
In your background positions, swap the left/right values. This gets a little tricky if you have used a pixel offset for a left-aligned element. I have found you can use percentages to get them off of the right-hand edge. So, background-position:4px center becomes background-position:97% center. You’ll have to play with this depending on the width of your UI element.
Seems fairly simple, doesn’t it? Now for the gotchas!

First, Firefox 2:
To deal with a Firefox 2 bug in columnar layouts where the center column is flexible width and the left and/or right columns are floated, put margin-right:auto;margin-left:auto on the center column.

And now, IE (both of em, not just IE 6):
To deal with an IE bug where the UI shifts if you maximize/restore the page, make sure you put position:relative on parent elements of children with position set to relative. More here.

To deal with IE RTL layout issues with floating elements, set direction:rtl on the text elements only (if this is possible). You will need to set direction:ltr on the parent elements to reset the direction:rtl inherited from the body tag. Then set direction:rtl on the text child elements. More here.

IE behaves better in RTL languages when widths are set on elements.

You can always try adding zoom:1 (triggers hasLayout in IE) or setting display of an element to inline-block (two techniques which solve a lot of IE display issues).

If you can’t do some of the techniques described above, you can try converting your complicated UI element to a table. IE usually flips tables nicely. But don’t go here first or you’ll wind up with a UI full of layout tables.

Hope this helps someone else trying to adapt their UI to right-to-left languages.

And here’s a good tutorial for more on this subject. Straight from the W3C’s mouth.

Here’s the issue. I have a 2 column or 3 column layout. I have a bunch of stuff in that layout – some components declared as position:relative to set them as parent containers for some absolutely positioned elements inside of them. I load the page in Internet Explorer in a RTL language. The browser window isn’t maximized. I maximize it. I restore it. Various components in my layout shift to the right. Seems like they are lining up to the right column now instead of the center column.

The fix? Put position:relative on the center column and the parent container of all the columns.

Toodles. On to fix more Internet Explorer bugs.

So my task is to get elements to line up correctly vertically, with some of those elements set to display:inline-block. What I was finding in IE is that one element would be something like 5 pixels higher than the element preceding it. And setting the margin-top of the higher element to 5px wouldn’t fix it. But setting a negative margin on the preceding element would fix it. “Come on,” I told myself. “There’s obviously something I’m not understanding here.”

Those are the moments I start searching the web for enlightenment. And I found this article (thank you rdoherty, whoever you are!)

In this article, it explains that setting an element to display:inline-block sets its vertical-alignment to baseline, which aligns it to its parent’s baseline. The suggested fix is to set it to vertical-align:top. This actually didn’t work in one of my examples, but setting it to vertical-align:bottom did.

Just want to share this fix with someone else that is battling Internet Explorer display issues. So you can save your tresses. Or maybe a bunch of bald-headed web developers marching on Microsoft’s headquarters might make a point….

Internet Explorer is a never ending source of surprises. Grrrrrr.