page looks crooked in Mozilla

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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_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)
                                        sub_container2 (padding:18 0 20
5px), 495
                                                slogan (margin: 0 0
10px 0)

        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)
                                        sub_container2 (495px,
padding:18 0 20 5)
                                                slogan (padding: 0 0 10

                                        main_nav_container (margin: 30
12 0 0)
        Footer (800x120)
                footer_line (margin:0 195 0 0) 500x40
                footer_text (margin: 10 25 0 0)

The pages: (in English) (in Farsi)

Re: page looks crooked in Mozilla

To further the education of mankind, vouchsafed:

Quoted text here. Click to load it

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

Infinity has its limits.

Re: page looks crooked in Mozilla

Neredbojias wrote:
Quoted text here. Click to load it

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
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

     container1 (800px)
        main_container (padding:0 60px 0 20px)
                layout_table (relative)

Site Timeline