duplicate forms do not keep the same format in IE

[rambleon]

Hi, I have a web site that was originally only in English, I wanted to make the site multilingual so that there would be copies of each page in English, Arabic and Hebrew. To do this I created a duplicate site for development, after completing the basic structure with the 3 languages on the development site and ensuring that it worked in Firefox, Chrome and IE, I copied the development site back to the production site, so that everything should be an exact copy, and it works fine in Firefox and Chrome but in IE the Arabic and Hebrew pages are not formated correctly and I do not understand why.
To see an example of the problem the develoment page which appears correctly is:

http://rfp.mosheavni-art.com/reikiforpeace_arb.php

The production copy of the page in which the menu has moved is:

http://reikiforpeace.org/reikiforpeace_arb.php

Any help or suggestions would be greatly appreciated
Thanks
David -

[JorgeM]

It's not only IE. just checked both links from my iPad and the content on the right shifts. I suspect that you have differences in your style sheet. I can take a look later tonight unless someone else gets to this and helps you.

[Octet]

Firefox and Firebug show the stylesheets as exactly the same and in IE 10, the sites look identical.

[Octet]

I have noticed one issue, you have defined sizes in both pixels and as percentages which means you sometimes end up with a lot of whitespace, or a very crushed design depending on the screen resolution.

As I can't actually see the problem I don't fully know, but this might be causing some issues?

[masterjiraya]

as what AHarrisGsy said... his comment is right. but additional to that is... the font type text of a certain language is also a big problem in cross browser testing. this a css issue on cross browser plattforms. second, from your development site, it's css is somewhat different to the production site.

[rambleon]

Hi, Thanks for all the replies, I think I found the problem in IE, if I view with compatibility view turned off then everything appears ok (same as chrome and firefox).
AHarrisGsy what do you suggest are the best units to use for defining sizes?
Jorge you say there's also a problem on IPad, which browser are you using? Or are you saying the problem's not browser specific.

[Octet]

It all depends on what you are designing it for, if you are going for mobile browsers then use Percentages by all means, and if going for a desktop then go for Pixels (personally oppinion).

The problem occurs when you mix the two together, this is when you can sometimes have bits competing, and depending on how the browser loads the CSS shall depend on what measurement wins.

[Squidge]

I use percentage as this allows for more flexibility and fluidness for cross browser/platform.

For text i use èm

[Octet]

I think the most important thing is, you don't mix them up as this can lead to some rather unexpected situations.

WRT multilingual sites. You say you've created 3 different versions. That's a lot of work and unnecessary. Keeping everything in sync when you make changes is an absolute pain.

Peeping into your html, I notice that you're using inline styling as well as css files. You could get all that stuff into a general css files and have additional ltr.css and rtl.css files, loaded depending on selected lang, e.g.

http://rfp.mosheavni-art.com/ar/reikiforpeace/
http://rfp.mosheavni-art.com/he/reikiforpeace/
http://rfp.mosheavni-art.com/en/reikiforpeace/

This does not mean subfolders for each language, that is simply an apache mod-rewrite, which allows you to write rfp.mosheavni-art.com/ar/reikiforpeace/ for something like rfp.mosheavni-art.com/index.php?lang=ar&page=reikiforpeace

<?php
$dir = 'ltr.css';
if(isset($_GET['lang']) && in_array($_GET['lang'], array('ar','he','en'))){
    $lang = $_GET['lang'];
    if($lang == 'ar' || $lang == 'he') $dir = 'rtl.css';
}else{
    $lang = 'en'; //or your default lang
}
?>

Then you have the variable required to load the appropriate css file.
Your translation strings can be stored in po files using GETTEXT and soemthing like PoEdit (see http://diafol.blogspot.co.uk/2013/03/gettext-issues-fix-with-php-gettext.html), or you could go for php array strings.

ANyway, just a thought.

[masterjiraya]

to Rambleon, based on what Mr. Diafol has said. He's talking about language package in most Common Content Management Systems. best language package was the Drupal and word press. For example, there is an admin page content for inputing the message on a certain part of the user's level, the one that is in the home page. and sets the input if it is in language of english or other language then saves it on to the database while others are using scripted language packs

[rambleon]

Thanks AHarrisGsy, The thing that I don't understand about pixels is how the display remains constant with different screen resolutions. With this in mind I'd think that percentages would be more compatible with differing resolutions and screen sizes, is this correct?

[rambleon]

Hi Diafol, thanks for the suggestion, I didn't know about po files. Are you saying that if I put the css into css files and the content into po files I can create one page in 3 languages rather than a seperate page for each language?

Yes, that's exactly what I'm saying. :)

However, if you're new to php, setting up GETTEXT can be a bit of a challenge - although the link I gave in a previous post to a blog entry may help.
Most beginners would rather use php strings.

So, here's a simplified example of folder/file structure for a typical DIY multilingual site:

config/
    config.php
css/
    main.css
    rtl.css
    ltr.css
    img/
lang/
    en.php
    he.php
    ar.php
pages/
    home.php
    about.php
    peace.php
includes/
    nav.php
    head.php
    footer.php
index.php
.htaccess

JUst to put this structure in context: the index.php file could have this:

<?php
    require 'config/config.php';
    require 'langs/$language.php';
    require 'includes/head.php';
    require 'includes/nav.php';
    require "pages/$pagename.php";    
    require 'includes/footer.php';
?>

The config/config.php file checks for a language parameter and a page parameter in the url and sets the $language (e.g. 'en' or 'he') and $pagename (e.g. 'home' or 'about') variables accordingly.

The langs/$language.php file checks loads locale strings. It would have the following type of structure (langs/en.php):

$lang = array(
    'name' => 'English',
    'code' => 'en',
    'encoding' => 'utf-8',
    'direction' => 'ltr',
    'atfontface' => NULL,
    'site_heading' => 'Peace to All',
    'nav_home' => 'Home',
    'nav_about' => 'About Us',
    'nav_find_us' => 'How to Find Us',
    'nav_work' => 'Charities',
    'home_title' => 'Home',
    (etc)
);

This would be identical for each language. Depending on how much text you have, you may find it easier to split the strings into more than one language file, e.g.

langs/
    en/
        general.php
        home.php
        about.php
        (etc)

The head.php file would look something like this:

<!DOCTYPE HTML>
<html dir="<?php echo $lang['direction'];?>">
<head>
<meta charset="<?php echo $lang['encoding'];?>">
<title><?php echo $lang['page']['title'];?></title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/<?php echo $lang['direction'].".css";?>" />
</head>
<body>
<div id="wrapper">

etc for the other files...

[rambleon]

Thanks for all this diafol, seems you,ve generated yet another version of the site for me, but this is definatley the multilingual way to go.
Thanks for all the detailed explanation, one thing I don't see are the po files, I understand you're using php only here and I need to use GETTEXT for po files, so I'll check out your blog post and Google it now that you've set me in the right direction.

No prob, come back if you're stuck on something. And - this is just one way of doing it. There are others.

[rambleon]

For anyone looking for a solution to IE compatibility mode messing up their page here's the meta tag to disable it:

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />