How to apply direction css attribute in list elements


Tags: html,css,internet-explorer,arabic,direction

Problem :

I have some legacy html markup and I need to enable Arabic language support.

So, I have a list of news headlines and render them in <li> elements.

Here is sode:

..
<li>
<a>some Arabic text</a>
<em>news datetime</em>
</li>
..

So, I need to apply rigth text-alignment and direction rtl for anchor, but not for datetime. I applied text aligment for <li> element and everything is fine. But I need to apply "direction: rtl" style to anchor and here goes my problem.

I've tried to create <div> element with rtl direction attribute and put anchor into it. This works fine in chrome, but I need to support IE6+

Also I've tried to apply direction attribute to <li> and override this attr in <em>, but this doesn't work.

Any suggestions?

Thanks in advance, Vitali.



Solution :

li {direction:rtl}
em {direction:ltr; float:left}

    CSS Howto..

    How to hardware accelerate a box-shadow animation in CSS?

    How do I fill up the remainder of a div with another div?

    How to include css file in a JavaFx Spring application

    how to order CSS elements?

    how to add space at top of page

    How to change the indentation of all the lines except the first line in bulleted or non bulleted list?

    How to tell the browser to ignore previous css edits?

    How can I make the CSS-hover animation to stay?

    How to show overflowing text with animation?(Javascript - HTML - CSS)

    How to get multiple rotating background cover with css / Full screen slideshow

    How to attach a CSS stylesheet to FXML?

    CSS flex, how to display one item on first line and two on the next line

    How to style this form using CSS?

    How to make the gif photo to be same width as the table?

    How can I have columns like this in CSS? (image)

    How to make arrows on both sides of a box using css [duplicate]

    How can I align an image with css

    How to change visibility of a div css to visible with jQuery

    How should I crop the image at client side using jcrop and upload it?

    How can I get a block to print complicated divs horizontally?

    CSS: How to center element that is bigger then the container?

    How to center vertically and horizontally a heading text using flask-bootstrap

    How to vertically align html radio buttons with CSS-only in this code?

    CSS how to get the: a img on top, insted of the first a href “”without floating

    I found another way of doing this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul {list-style: none; margin: 0; padding: 0;} li {position: relative; overflow: hidden;} a {display: block;}...
    Read more

    In a framework using rewrite rules, how best to integrate CSS and JS?

    How to change qunit theme / layout

    Twitter widget covers up another div that might appear over it . How to make twitter widget appear under?

    How can I affect Opacity of an image whilst hovering a div?

    How make to flow around a triangular block?

    How can I target CSS to a particular sharepoint Page Layout file?