Aleksandar • Vacić

iOS bits and pieces

direction:rtl breaks CSS layouts in IE

“Fun” with Internet Explorer 6 seems never ending, as the case with recent internationalization efforts I did in the office shows. We needed to create a Hebrew version of our flagship web site product - a language where writings goes right to left.

Hence, our three-column layout, done with floats, was supposed to be inverted. Along with that, a number of other parts was to be horizontally flipped - one of them being variable tabs I created way back. CSS2.1 spec defines few rules responsible for right to left display. So, what we did was:

1
2
3
4
5
6
7
body {

unicode-bidi: embed;

direction: rtl;

}

With these rules, Firefox worked ok, but IE6 almost totally collapsed. It’s not only messed when displayed - when you move your mouse over elements they disappear, move to different places… Only direction rule is enough to mangle it - I added just this one line to previously mentioned tabs example:

1
2
3
4
5
#tabs {

direction: rtl;

}

Here is the screenshot, if you can’t check it in IE:

Holly-hack does not help here, setting width/height or position neither. Nothing helps here, I tried them all. It is somehow connected with float, but removing that rule does not really helps.

Workaround is to override direction for floats and re-apply it to elements that contain actual text:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {

direction: rtl;

}

#tabs li {

direction: ltr;

}

#tabs a {

direction: rtl;

}

Of course, last two lines would go under cond. comments, so that only IE is targeted. I’ll see if something else comes up during ongoing work…

WordPress theme: aplus Lady

If you read this in browser, you are most likely looking at the new theme. If not, use the delicacies at the bottom of the home page to change to aplus Lady theme.

This theme is technically identical to aplus theme: it has integrated time since and time of day plugins, support for gravatars, recent comments and blogroll display.

What’s new is that I changed the way design assets are loaded. Instead of pulling images from CSS, I used good old img tag and placed in inside of heading tags, where needed. Feels…strange. :)

Another thing is that Yasmeen’s photo is also simple img which makes it very easy to block. If that image is office-unfriendly for you, but you like the colours and would like to use the theme, then simply add the image to ad-block (whichever you use).

This also makes it very easy to change the image with something truly yours (when I actually offer it as download). The image can be 200px wide and unlimited in height, so you will have fun playing around.

This theme was a really long way in making. I started with something quite different and eventually changed everything but the main image.

The space at the top is perfect for ad placement, but I have not bothered to set any placeholders for it, so that would be your part to do.

Way forward

I do not offer this theme for the download yet, nor I have any idea when I would. To be easily customizable, I’m thinking of implementing sIFR, but that will have to wait some time.

Knowing me, that would either be 1-2 days or several months. Hey - even in the state like this, it waited a good year or something…

Evenstar

Arwen believes

It was a gift…Keep it.

Wonderful and very strong scene. Howard Shore - The Lord of the Rings Trilogy - Evenstar