SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Sesame Street Iimitk's Avatar
    Join Date
    Feb 2006
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy IE6 & Opera 9 problem

    Hello,

    Consider the following code:
    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>New Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
        .news-excerpt {
            width: 400px;
            background-color: #dadada;
        }
     
        .news-excerpt p.more {
            text-align: right;
        }
     
        .news-excerpt .more a:link, .news .more a:visited {
        background: url(/images/red-arrow.gif) no-repeat left center; /* red-arrow.gif is 5x9 pixels image */
        padding-left: 10px;
        }
    </style>
    </head>
     
    <body>
    <div class="news-excerpt">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        <p class="more"><a href="">Read more...</a></p>
    </div>
    </body>
    </html>
    Some presentational code is for emphasis only.

    Now, if I want to switch this minimal & straightforward code into right to left documents (RTL), both IE6 & Opera 9 got buggy!

    It's done simply by adding a dir attribute to the html element with value rtl, changing the background image location from left center to right center & changing the padding on the anchor to be applied on the right instead of on the left. The new code is:
    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html dir="rtl">
    <head>
    <title>New Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
        .news-excerpt {
            width: 400px;
            background-color: #dadada;
        }
     
        .news-excerpt p.more {
            text-align: left;
        }
     
        .news-excerpt .more a:link, .news .more a:visited {
        background: url(/images/red-arrow.gif) no-repeat right center; /* red-arrow.gif is 5x9 pixels image */
        padding-right: 10px;
        }
    </style>
    </head>
     
    <body>
    <div class="news-excerpt">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        <p class="more"><a href="">Read more...</a></p>
    </div>
    </body>
    </html>
    In Firefox 2 & Safari for Windows everything works just as intended, but in IE6 & Opera 9, applying any right padding on the anchor element doesn't seem to have any effect!

    I could have said it's another annoying IE6 bug, but since Opera 9 behaves in the same way, I might have done something wrong, or maybe there's some other approach I can tackle.

    I tried to resolve the issue by adding a direction: ltr; style declaration to the .news-excerpt p.more style rule. It worked in resolving the background arrow image padding, but got the anchor to inherit it's parent's direction. Adding a direction: rtl; declaration to it doesn't switch the direction back, which makes this solution useless.

    Any help?
    Imagination is more important than knowledge. - Einstein

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You could float the anchor which should fix the problem but doesn't answer the real question

    Code:
    . more a{float:left;}
    If you had left the background image at left with 10px left padding then opera would show the image on the right with right padding because the direction has been reversed. I'm guessing that Opera is correct in this instance but its a complicated subject.

    http://www.w3.org/TR/CSS21/visuren.h...pdef-direction

  3. #3
    Sesame Street Iimitk's Avatar
    Join Date
    Feb 2006
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you had left the background image at left with 10px left padding then opera would show the image on the right with right padding because the direction has been reversed. I'm guessing that Opera is correct in this instance but its a complicated subject.
    Actually it doesn't. You may have tried using English characters; e.g. Read more..., etc., but if you used RTL-based script like Arabic, the image will show on the left even in Opera. (Try copying this "اقرأ المزيد...", which is the translation of "Read more..." in Arabic).

    I have the whole CSS21 specification printed but I didn't get to it yet as I'm finishing the HTML401 specification. Areas of localization & internationalization though look very complicated are indeed interesting.

    Now specifically speaking on the case before our hands, it's straightforward Paul. How could a mere process of switching directions be more complicated in some language than another? It's just pure mirroring here, and it's purely presentational.
    Imagination is more important than knowledge. - Einstein

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    How could a mere process of switching directions be more complicated
    I must confess that I have not looked into this before but it does seem more complicated than expected . It seems that inline elements (like anchors) need a specific override withe either a bdo tag in the html or via css with direction:rtl on the inline element itself. The complication also arises where mixing languages as you pointed out the English characters will be ltr because they would make no sense otherwise which is why the override is needed.

    Using your code and the method I first suggested this seems to give the correct results in opera and IE (but I could be mistaken).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>New Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
        .news-excerpt {
            width: 400px;
            background-color: #dadada;
        }
     
        .news-excerpt p.more {
            text-align: left;
        
            }
     
        .news-excerpt .more a, .news .more a:visited {
        background: url(/images/red-arrow.gif) no-repeat right center; /* red-arrow.gif is 5x9 pixels image */
        padding:0 10px 0 10px;
        direction :rtl;
            }
    
    </style>
    </head>
     
    <body>
    <div class="news-excerpt">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        <p class="more"><a href="">اقرأ المزيد...</a></p>
    </div>
    </body>
    </html>
    Firefox puts the image in the same place however it doesn't apply the padding unless you set padding on both sides as in my example above.

    While nothing specifically to do with the above it should be noted than in css2.1 that the tiling and position of background images on inline elements is undefined. Therefore browsers may differ on where these images are placed even in ltr languages anyway.

    If you need background images you may need to ensure that the elements are block level to make sure they are placed correctly such as floating as mentioned in my first example.

    Sorry I can't offer any more specific help as this an area I have avoided before

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have any personal experience of writing bidirectional text, so this is just speculation.

    As far as I can see, Opera and IE are doing it right and Firefox is buggy. You are only changing text-align for the paragraph, and that controls the horizontal alignment of inline boxes (and text) within a line box. It shouldn't affect the writing direction.

    By overriding the writing direction, as Paul does in his example above, you get the effect you're looking for.
    Birnam wood is come to Dunsinane

  6. #6
    Sesame Street Iimitk's Avatar
    Join Date
    Feb 2006
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I must confess that I have not looked into this before but it does seem more complicated than expected . It seems that inline elements (like anchors) need a specific override withe either a bdo tag in the html or via css with direction:rtl on the inline element itself. The complication also arises where mixing languages as you pointed out the English characters will be ltr because they would make no sense otherwise which is why the override is needed.
    There's very important thing to mention here: we are NOT dealing with any bidirectionality here! The site I'm developing is bi-lingual, however, both versions of the site are completely separate and involve no mixing of English & Arabic texts whatsoever.

    Quote Originally Posted by Paul O'B View Post
    Firefox puts the image in the same place however it doesn't apply the padding unless you set padding on both sides as in my example above.
    I think I've found where does the problem lies; it's the way browsers apply padding according to the whole document's direction, i.e. the value of the dir attribute assigned on the html element. Try omitting dir="rtl" from the second code snippet in my first post. This would cause all browsers to render the HTML code consistently! Add dir="rtl" back & browsers would differ in rendering the code. When the document direction is RTL, IE & Opera add right padding from the left edge of an inline element & vice versa, while Firefox & Safari add right padding from the right edge of an inline element & vice versa. This oddity doesn't happen in IE & Opera when the document direction is LTR.

    Quote Originally Posted by Paul O'B View Post
    While nothing specifically to do with the above it should be noted than in css2.1 that the tiling and position of background images on inline elements is undefined. Therefore browsers may differ on where these images are placed even in ltr languages anyway.
    Looks so. However, in this particular issue it's obviously a problem with rendering RTL code as I explained above.

    Quote Originally Posted by Paul O'B View Post
    If you need background images you may need to ensure that the elements are block level to make sure they are placed correctly such as floating as mentioned in my first example.
    I tried this, but it would cause problems in other designing tasks because a block-level element would expand along the available space causing unwanted results.

    Quote Originally Posted by Paul O'B View Post
    Sorry I can't offer any more specific help as this an area I have avoided before
    Thanks you so much Paul. Your input is as always valuable & inspiring.

    Quote Originally Posted by AutisticCuckoo View Post
    As far as I can see, Opera and IE are doing it right and Firefox is buggy. You are only changing text-align for the paragraph, and that controls the horizontal alignment of inline boxes (and text) within a line box. It shouldn't affect the writing direction.
    No browser is buggy in regard of interpreting the text-align property as far as I can tell. It's the way they apply padding on inline elements when the HTML document's direction is RTL where some brwosers get buggy.

    And I do think that Firefox & Safari are the ones who get it right, & IE & Opera are buggy. Applying a right (or left) padding from the other direction is illogical to me. The specification specifically mentioned that inline boxes must be rendered in visual order (not logical one):
    8.6 The box model for inline elements in bidirection context

    For each line box, UAs must take the inline boxes generated for each element and render the margins, borders and padding in visual order (not logical order).
    When the element's 'direction' property is 'ltr', the left-most generated box of the first line box in which the element appears has the left margin, left border and left padding, and the right-most generated box of the last line box in which the element appears has the right padding, right border and right margin.
    When the element's 'direction' property is 'rtl', the right-most generated box of the first line box in which the element appears has the right padding, right border and right margin, and the left-most generated box of the last line box in which the element appears has the left margin, left border and left padding.
    Source.
    Imagination is more important than knowledge. - Einstein


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •