synchronise header format for different language pages

For website: http://www.cutesocksforbabies.info

I created two language pages for the website. However, I have no idea why the headers for the two language pages are different, i.e. the logo on the English page has a bigger "head-room" than the logo on the Chinese page.

I have been trying to figure this out for the whole week without prevail. Therefore, I look forward to getting your advice. Many thanks in advance for your help.

CSFB:

For website: http://www.cutesocksforbabies.info

I created two language pages for the website. However, I have no idea why the headers for the two language pages are different, i.e. the logo on the English page has a bigger "head-room" than the logo on the Chinese page.

I have been trying to figure this out for the whole week without prevail. Therefore, I look forward to getting your advice. Many thanks in advance for your help.

The problem is the length of your text TAGLINE.

In ENGLISH it is: Your Specialty Store for Baby Socks that are Cute Beyond Measure

It is much SHORTER in the Chinese equivalent.

The ENGLISH text is spilling over the div areas on the RIGHT of the header.

If you SHORTEN your tagline to read: "Baby Socks that are Cute Beyond Measure"

I don't think you need to say "Your Speciality Store" - we can all see it's a store !

... it will fix the issue.

It CAN be fixed with language-specific stylesheets, where you can force the margins to be either a positive or negative amount (value). EG, for your CHINESE stylesheet (which will ONLY have css in it that you want to change for the chinese "pages"), you could look at applying a different margin for some of the header elements - such as the logo content area... add 20px to the top of it.

Try this...

Using a PLAIN TEXT EDITOR, create a stylesheet called chinese_stylesheet.css

Put THIS into that stylesheet: #logo {padding-top:25px;}

Save it, then FTP it to your template's stylesheet folder.

You may need to adjust the 25px value up or down to get the same gap that you are getting on the english pages.

Schoolboy, My heartfelt thanks to you for solving this issue. Really appreciate your helpful answer!

I tried making the English tagline shorter (even to only one word), but it didn't work... Therefore, I had to resort to the second option of creating and uploading a Chinese css file. Now, I finally managed to manually "synchronise" the header logo position for both the English and Chinese page. Many thanks again! :)

Glad the custom stylesheet works... but you are adding a lot of load to your site by copying the contents of ENTIRE default stylesheet.css file.

You need ONLY use declarations that must over-ride default declarations. CSS works in chronological order, with later declarations overriding earlier ones or the same classes or ID's.

It is better for SEO purposes to try to restrict load wherever you can... to load two stylesheets that are practically copies of each other is unnecessary.

Thank you so much for your kind reminder and the clear instructions.

I just reduced load from the custom stylesheet. I am glad I learnt something new. Thanks!