Problematic positioning of editable rotated text

I am trying to make a table with certain text cells vertical (rotated), but with big "strong" problems getting consistent positioning. I have a basic work plan. It was a bit in IE (big surprise), but I figured I could fix it with some kind of browser. However, the real problem is that the text that is being edited by the way changes slightly when selected the first time. It's a bit difficult to explain so you can see for yourself: http://gdurl.com/eM_F

In Chrome, this always happens when navigating between fields to focus the first time, but not clicking. And sometimes when you type them after clicking on them.

In IE, this always happens the first time a field gets focus.

I would like to somehow solve this with css, but I could use javascript / jquery if needed. I tried calling focus()

on them when the page loads so that their position is consistent, but it didn't work. Also tried setting contenteditable-false to false and setting tabindex in hopes of setting contenteditable to true when it gets focus will fix it, but even if contenteditable is false it still behaves like the tab shows.