Category Archives: Uncategorized

Display: inline-block in webkit

To fix funky alignment issues with inline-block elements, add vertical-align:top to the element.


JQuery UI drifting position

I have run into an issue with the jQuery UI position() function. If I use it to position a popup menu relative to the element that was clicked, the next time I open the menu, it drifts to the right, even though I am clicking the same element each time.

After googling and trying things, this is what I came up with:

$(“#myMenu”).show().position({my: “left top”, at: “left bottom”, of:, collision: “fit flip”}).hide().delay(600).fadeIn().focus();

That’s a mouthful, huh?

First off, we can’t position a hidden object so we need to show it first. Then, it appears we need to separate the positioning from the animation, so we hide it again, then fade it in. I also put a delay in there so it wouldn’t pop up right away, and then I set focus on the menu.

Since I am newish to jQuery, I don’t really know the significance of separating the positioning from the animation, but here is the link that turned me onto the solution.


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.