page looks crooked in Mozilla

Discussion in 'HTML' started by ashkaan57@hotmail.com, Sep 14, 2006.

  1. Guest

    The web site in question is in two languages, one in English and the
    other in Farsi
    (Persian) which is a right-to-left language. The Farsi pages are mirror
    images of the English, for example the menu is on the right, ...
    So, I used two stylesheets, with the same info, and changed the right
    and left
    properties (i.e. the left-margin:20px in English version changed to
    right-margin:20px in farsi version).
    It works fine in IE in both languages. In Mozilla, the English version
    works fine but the Farsi version looks crooked. the menu and everything
    else is shifted to the left. I spent a couple of days trying to figure
    out what is wrong and I can't (being new to CSS). I would GREATLY
    appreciate any assistance.
    I am not sure if this is appropriate or if it helps but here is the
    structure of the pages using CSS (the indentations imply <div
    id="header" is contained within <div id="container", ...):

    English pages:

    Container 800px, relative
    Header (relative, 800x226)
    Logo (absolute, 150x100, top:82, left:550)
    key_visual (absolute, 437x127, top:82, left:86)

    container1 (800px)
    left_column
    left_column_container (padding:0; margin:0)
    main_nav_container (margin: 30px 0 0 0)
    <Flash menu>
    main_container (padding:0 20px 0 60px), relative
    layout_table (relative)
    right_column (500x475)
    <aps_content_placeholder>
    sub_container2 (padding:18 0 20
    5px), 495
    slogan (margin: 0 0
    10px 0)
    content_container
    (490px)

    footer (800x120, margin:0, padding:0)
    footer_line (margin:0 0 0 195) 500x40
    footer_text (margin:10 0 0 25)

    Farsi version:

    container (800px, relative)
    header (relative, 800x226)
    logo (absolute, 437x127, top:82, left:86)
    key_visual (absolute, 437x127, top:82, left:263)

    container1 (800px)
    main_container (padding:0 60px 0 20px)
    layout_table (relative)
    right_column (500x475)
    <aps_content_placeholder>
    sub_container2 (495px,
    padding:18 0 20 5)
    slogan (padding: 0 0 10
    0)
    content_container
    (490px)

    left_column
    left_column_container
    main_nav_container (margin: 30
    12 0 0)
    <menu>
    Footer (800x120)
    footer_line (margin:0 195 0 0) 500x40
    footer_text (margin: 10 25 0 0)

    The pages:
    http://www.legalpersian.com/en/home.aspx (in English)
    http://www.legalpersian.com/fa/home.aspx (in Farsi)
    , Sep 14, 2006
    #1
    1. Advertising

  2. Neredbojias Guest

    To further the education of mankind, vouchsafed:

    > The web site in question is in two languages, one in English and the
    > other in Farsi
    > (Persian) which is a right-to-left language. The Farsi pages are mirror
    > images of the English, for example the menu is on the right, ...
    > So, I used two stylesheets, with the same info, and changed the right
    > and left
    > properties (i.e. the left-margin:20px in English version changed to
    > right-margin:20px in farsi version).
    > It works fine in IE in both languages. In Mozilla, the English version
    > works fine but the Farsi version looks crooked. the menu and everything
    > else is shifted to the left. I spent a couple of days trying to figure
    > out what is wrong and I can't (being new to CSS). I would GREATLY
    > appreciate any assistance.
    > I am not sure if this is appropriate or if it helps but here is the
    > structure of the pages using CSS (the indentations imply <div
    > id="header" is contained within <div id="container", ...):

    ....
    > The pages:
    > http://www.legalpersian.com/en/home.aspx (in English)
    > http://www.legalpersian.com/fa/home.aspx (in Farsi)


    Looks okay to me except for some kind of padding/margining problem at the
    left of the Farsi version. You could maybe mirror-image the pic of the
    book.

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Sep 17, 2006
    #2
    1. Advertising

  3. Guest

    Neredbojias wrote:
    > To further the education of mankind, vouchsafed:
    >
    > > The web site in question is in two languages, one in English and the
    > > other in Farsi
    > > (Persian) which is a right-to-left language. The Farsi pages are mirror
    > > images of the English, for example the menu is on the right, ...
    > > So, I used two stylesheets, with the same info, and changed the right
    > > and left
    > > properties (i.e. the left-margin:20px in English version changed to
    > > right-margin:20px in farsi version).
    > > It works fine in IE in both languages. In Mozilla, the English version
    > > works fine but the Farsi version looks crooked. the menu and everything
    > > else is shifted to the left. I spent a couple of days trying to figure
    > > out what is wrong and I can't (being new to CSS). I would GREATLY
    > > appreciate any assistance.
    > > I am not sure if this is appropriate or if it helps but here is the
    > > structure of the pages using CSS (the indentations imply <div
    > > id="header" is contained within <div id="container", ...):

    > ...
    > > The pages:
    > > http://www.legalpersian.com/en/home.aspx (in English)
    > > http://www.legalpersian.com/fa/home.aspx (in Farsi)

    >
    > Looks okay to me except for some kind of padding/margining problem at the
    > left of the Farsi version. You could maybe mirror-image the pic of the
    > book.
    >
    > --
    > Neredbojias
    > Infinity has its limits.


    Thanks for the reply Neredbojias. I did use mirror imaging on Farsi
    pages. If you look at the top part of the page, you see that logo and
    image are on the opposite side of the page, as compared to English
    version.
    One peculiar thing is the if I change the padding in the main_container
    from 60px to 0, in IE the menu gets shifted to the right by 60px, it
    almost falls off the image of the book, but in FF nothing happens; it
    just stays where it is. (main_container is where the manu and content
    are; it is the "parent" container. I listed the hierarchy in original
    post.)

    container1 (800px)
    main_container (padding:0 60px 0 20px)
    layout_table (relative)
    , Sep 18, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Joe
    Replies:
    1
    Views:
    482
  2. Matt
    Replies:
    2
    Views:
    466
    Dan Abrey
    Aug 12, 2004
  3. Henri
    Replies:
    9
    Views:
    1,800
    Toby Inkster
    Feb 22, 2005
  4. Jeff
    Replies:
    2
    Views:
    441
  5. AAaron123
    Replies:
    11
    Views:
    1,108
    AAaron123
    Nov 27, 2008
Loading...

Share This Page