Chrome/Opera CSS display bug in Bengali/Hindu/Tamil/Urdu (doesn't happen in FireFox/IE)

Question

We have a multilingual website and it seems we've stumbled upon some bug which is present in Chrome/Opera but doesn't happen in FireFox/IE. It happens only in a few of our languages such as Bengali/Hindu/Tamil/Urdu and we believe it's either script or font related. It seems that Chrome/Opera miscalculate the automatic width of a container element and so a child element of it is overflown to the next line.

To re-create, simply see the main page of our site in Bengali http://colnect.com/bn using different browsers. We have no browser-specific changes in neither HTML nor CSS code. You can click the languages button and switch between languages and you'll notice only some of them have this happening. A workaround has worked for some of these languages (such as Hindi /hi) where we set #top_text { font-size: 1em; } instead of 1.1em Playing with the CSS you could see that if you set a wide enough width for #top_text, the languages button won't be pushed to the next line. However, if its automatic width would have been set properly, this shouldn't have happened.

Any ideas for simple CSS workaround that would still keep our design responsive and useful in all languages?

Thanks

---

Answer 1

In your CSS (http://s.colnect.net/e-m.036.css)

#lang_btn

you have display:inline-block;

if you change this to

display:inline;

Or even remove this (by default a element takes inline), the issue would be sorted

Second option is to make all the anchor elements inline-block

i.e. <a></a> in that div as inline block with white-space: nowrap;