#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2008
    Posts
    6
    Rep Power
    0

    Dropdown Menu First level dispotitioned in internet explorer after changed to RTL


    Hi,
    I am converting a wordpress theme to Farsi, which is an RTL language.
    Meaning I have to convert anything that is left to right.

    Everything has been great, except for the drop down menu.
    It shows fine in firefox (see link below)

    http://mytasvir.com/photo/gallery/24b060df15cc3b.gif

    But in internet explorer, the first level is shifted to the left (see image below)

    http://mytasvir.com/gallery/image/730/24b060e63235cb.gif

    In the CSS part below:
    Code:
     /* first level */
    
    #pagenav li ul {
    float:none;
    position:absolute;
    display: block;
    width: 200px;
    left: -999em;
    margin-top: -1px;
    when I change the position:absolute; to position:relative; the outcome will be as below:

    http://mytasvir.com/gallery/image/730/24b060f02b67c3.gif

    which is also not acceptable.
    What Can i do?

    I attached the part of style sheet which is related to the navigation, sorry I had to upload on rapidshare....

    http://rapidshare.com/files/309492078/style.css

    please help! i really need help!
  2. #2
  3. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    837
    Before you start modifying the positional elements of the page to give the effect of a right-to-left language, first try the direction property of CSS
    Code:
    direction:rtl;
    http://www.w3schools.com/Css/pr_text_direction.asp

    I personally would choose to forget IE-compatibility if you're not being paid for it. I've made the stand with all sites I build now. Whoever comes to me knows they will receive a clean and interactive, semantically correct, standards-compliant, accessibility-minded Web site, with the exception of IE support. Just bear in mind: integrity doesn't pay much, but it's damn rewarding.
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2008
    Posts
    6
    Rep Power
    0
    Thanks,
    I have done that direction:rtl, further up the stylesheet, it is seen in the file attached...but that is where the displacement happens in IE.

    I hate IE myself...but I have to care for it. cuz usually more than 70% of my viewers use IE. most of them IE6!!

    So, no going around it...I hope someone can help me with this...
  6. #4
  7. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    837
    In that case, use Internet Explorer CSS conditional comments, and within the IE-specific stylesheets, hack together something ugly that IE will eat up. I say this because there is nothing inherently wrong with your CSS code, so this is the popular route. By the way, there's no direction property in the sheet you linked.

    eg:
    Code:
    <!--[if IE 6]>
    Special instructions for IE 6 here, or link to external stylesheet
    <![endif]-->
    http://www.quirksmode.org/css/condcom.html
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2008
    Posts
    6
    Rep Power
    0
    Oh, I forgot, I deleted the direction: rtl; so that the menu will at least be usable...

    when I add the code here:
    Code:
    #pagenav li  {
    	display: block;
    	float: right;
    	direction:rtl;
    }
    'that' happens!

    i just uploaded the site:
    http://www.tahatejarat.com/
  10. #6
  11. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    837
    I actually can't see the site in IE. I initially removed the links to the program on my computer, then I went through a period of madness, and by the end of it IE just refused to load altogether.

    From the looks of it in the source, you're already using CSS conditional comments, so just add more to the IE-specific stylesheets.
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids

IMN logo majestic logo threadwatch logo seochat tools logo