IE 6 min-height fix

Oh I love this. I was all set to use a css expression to fix a min-height bug, and went searching for that code, cause it’s not something most people can remember off the top of their head. And found this, instead.

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.

CSS programming for right-to-left languages

I am far from an expert in RTL languages. But I do have some experiential knowledge to share in this area from having to make CSS layouts work across browsers in RTL mode. So, if you have to support Hebrew or Arabic, here is what you do.

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.

IE RTL Maximize Restore Issues

And I hit yet another bidi bug in Internet Explorer. I suppose it makes sense and maybe it was bad programming on my part, but none of the other browsers were complaining….

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.

IE and inline-block

It was another day of pulling my hair out over the way Internet Explorer unexpectedly displays things….

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….

Fixed Position Behavior

Well, here’s a weird one. Position an element relatively within a div set to scroll (auto, scroll) and the relatively positioned element behaves like a fixed element in IE (both 6 and 7). Taking advantage of that fact could get position:fixed working in IE6! But if you DON’T want that behavior, the work-around is to set the position of the scrolling div to relative as well.

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

Fixing floated layouts in right-to-left languages (Internet Explorer)

For right to left languages, it is common to put this CSS declaration on the body tag:

direction:rtl

This is inherited by all the elements on your page. However, I’ve found that some floated elements misbehave in RTL layouts in IE. The fix is to put the direction:rtl declaration on the text elements only. You can keep the declaration on the body tag, then reset problematic elements with direction:ltr, and put direction:rtl back on the text portions of those elements. For example, let’s suppose we have an element that looks like this:

<div class="wrapper">
  <div class="float"><img src="mypic.gif" /></div>
  <div class="float">
    <h4>Title Text</h4>
  </div>
</div>

This would be the way to do the styles:
body{direction:rtl}
div.wrapper{direction:ltr}
div.float{float:right} (would be float:left in a ltr layout)
h4{direction:rtl}

Try it if you are having troubles. It might save you a few hours of work. Or more.

Image Resizing in IE

Here’s an interesting blog post about improving the quality of images that you are resizing in your UI when viewing them in IE.

The (proprietary) css attribute is -ms-interpolation-mode:bicubic;

It does say that it’s probably safest to apply the fix only to images you are explicitly resizing. Until I read that line I was all set to add it to my base styles stylesheet….

Firefox 2 layout bug

In Firefox 2, in bidi mode, when you have a layout where a non-floated column set up to be a containing block is beside a right-floated column, the layout of the non-floated column gets pushed to the right (overlapping the right floated column). Unfortunately, I don’t have a picture right now, which would help. (I’ll try and take care of that later).

The fix is to add margin-right:auto to your containing block. And this bug appears to be fixed in Firefox 3 – which most Firefox users have updated to, because Firefox users are savvy users and know that pulling the latest browser is a good thing to do.

Setting min-width and max-width in IE 6

Internet Explorer 6 doesn’t support the min-width and max-width styles. But we can use expressions to get around this. Expressions are something IE supports that allows you to set a css value to the result of a javascript statement.

Here is how we can set a minimum width of 960 pixels in IE6.

* html .myClass{width:expression(documentElement.clientWidth < 960 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 960 ? "960px" : "auto") : "960px") : "auto")}

What this says is that if the width of the element with class of myClass is less than 960 pixels, set the width to 960px else set it to auto (which will preserve the current size). There is extra code in here to account for whether or not your page is set to use xHTML or HTML in the doctype, which changes the object reference for the body tag (xHTML uses documentElement intead of body).

I’ve found this article on the web, which says that reqular expressions are very expensive on the page, and you should use javascript instead.

And also this article, which says that the browser can freeze if you set the width of the browser to the same value. It suggests tweaking the code to something like this, instead:

* html .myClass{width:expression(documentElement.clientWidth < 962 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 962 ? "960px" : "auto") : "960px") : "auto")}

Probably good to do that to be on the safe side.

Multiple class syntax

Okay, I’ve known for a long time that you could assign multiple classes to an element, like so:

<div class="large red">Some text</div>

Then I could reference code css to define red styles and large styles.


.large {font-size:2em}
.red {color:red}


And the text would be large and red. All good. But what I wanted to be able to define was a style that only applied if both classes were on an element. And I’ve been going along not realizing that the syntax was available. How could I have missed that in the book (it was on page 34)? But I did. So, maybe someone else has, too. Here is the syntax.

.large.red{border:1px solid black}

And so my div text, above, will be large, red, and have a black border. The syntax is to just butt those class definitions up next to each other with no space in between them. Simple. Happy coding!

CAVEAT: This does not work in IE 6. So, if you have the luxury of not having to code for that old browser, or if you are able to put Dean Edwards’ IE7 script on your server, you can use this syntax.