problem with writing-mode and background image 2

[snotmare]

Greetings!

I have the following css...

BoardObject_RowHandle{
    background: url(Row_Handle.gif);
    border: 1px solid;
    filter: fliph flipv alpha(opacity=55);
    opacity: 0.05;
    text-align: center;
    vertical-align: middle; 
    width: 50px;
    writing-mode: tb-rl;
}

The problem is with "writing-mode". If I comment out this line, my background image displays fine. When this line is not commented out, my background image disapears.

Is this a known problem, or am I just missing something dumb? Is there a work-around?

Thanks all!


---------------------
He who has knowledge spares his words, and a man of understanding is of a calm spirit. Even a fool is counted wise when he holds his peace; when he shuts his lips, he is considered perceptive. - King Solomon

 

[mbrooks]

Is the object that <i>BoardObject_RowHandle</i> references empty?

EXAMPLE:

<tr>
    <td class="BoardObject_RowHandle">

    </td>
</tr>

If so then you must add

empty-cells: show;

to your stylesheet

M. Brooks

http://mbrooks.info

 

[snotmare]

Hello mbrooks! Valiant effort, but it still doesn't work. I didn't know about the empty-cells property, so you still get a star for teaching me something new .

The table cell that I am formating is populated. The only difference between including the "writing-mode" attribute and not including it, is the display of my background image. When I leave out "writing-mode", my cell displays perfectly with the only exception being that the text is facing the wrong way. If I include "writing-mode", the text displays the right way, but the background image disapears.

So, does anyone have any idea about why this is happening? Or, more importantly, if there is a work-around?


---------------------
He who has knowledge spares his words, and a man of understanding is of a calm spirit. Even a fool is counted wise when he holds his peace; when he shuts his lips, he is considered perceptive. - King Solomon

 

[Vragabond]

I know that what you're using is IE only and I expect you're only testing it in IE, so this should not make a whole lot of difference but writing-mode is a non standard attribute. You might try with [tt]direction: rtl;[/tt].

 

[ChrisHunt]

It looks like another IE rendering bug. A workaround is to put a <div> inside the <td> and apply some of the rules to that instead:

.BoardObject_RowHandle {
    background: url(row_handle.gif);
}

.BoardObject_RowHandle div {
    writing-mode: tb-rl;
    border: 1px solid;
    filter: fliph flipv alpha(opacity=55);
    opacity: 0.5;
    text-align: center;
    vertical-align: middle;
    width: 50px;
}

...

<td class="BoardObject_RowHandle"><div>Hello World</div></td>

That seems to work, on IE at least.

On Firefox, the text doesn't get flipped around at all ([tt]filter[/tt] is a microsoft-only thing), and since you've set the opacity to just 5% it's barely visible anyway.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[snotmare]

Great stuff guys, thanks!

The solution I've chosen to use is a shoot-off of ChrisHunt's idea. I couldn't get a DIV to fit snug enough within the cell, so I just used a table within the cell. It seems tedious, but I am building my page dynamically with javascript, so it's really not that big of a deal.


---------------------
He who has knowledge spares his words, and a man of understanding is of a calm spirit. Even a fool is counted wise when he holds his peace; when he shuts his lips, he is considered perceptive. - King Solomon