[SOLVED]Sliding Doors Menu in Japanese wrong behavoir in IE7

[Heiko H.]

Hi community,

i have, not a phpwcms specific (i know) problem with a menu in Japanese language, as you can see here: http://www.kangaroo-stop.de/ja_hostel_geschichte.phtml
The problem is, there is some space under some Menutabs. This is only visible in IE7 and only in the Japanese menu.
I have no ideas why this happens?
Is anyone out there, maybe a Japanese?, who know about that strange behavior and can help me to fix that?

THX Heiko...

[EDIT]
Obviously you need a Japanese font.
[/EDIT]

[Jensensen]

looks well here: http://meineipadresse.de/netrenderer/index.php

guess the Japanese font is somehow too "heavy" (big) for this kind of --> small buttons.

wait...
hmm, strange, proper sliding door, well done! so, it should be ok. works perfect with FF... mac (even with bigger font size!)

[Jensensen]

maybe your Japanese font is corrupt?

[Heiko H.]

THX Jens for your quick reply.

Here http://meineipadresse.de/netrenderer/index.php the same Tabs are 1px too big (f#@?$&g IE )
Take a closer look...

maybe your Japanese font is corrupt?

No, i have tried more than one font.

Heiko...

[pepe]

Kannst du denn keine feste Höhe verwenden, anstelle von Paddings ???

[juergen]

Code: Select all

 content="text/html; charset=iso-8859-1"

Never thought this might be possible... at all

[Heiko H.]

Kannst du denn keine feste Höhe verwenden, anstelle von Paddings ???

That's a good idea, I will try it, thanks pepe...

Code: Select all

 content="text/html; charset=iso-8859-1"

Never thought this might be possible... at all

Me too, but it works, as you can see
In the beginning it was not planed to make this site in more than 2 languages (german, english).

Heiko

[Jensensen]

Since all Japanese letters are coded as html entities the question could be how the OS derives each sign while using iso-8859-1.
I guess the browser substitutes the missing signs using --> any other utf-font which is available .

If so the, the next question would be: Same effect on a page with proper utf charset?

answer: NO
then there are perhaps different fonts used - with different (built-in) weight, line-height, proportions...
On the other hand the (real) sliding door buttons are working correct: grow with font size/weight! (perfect sliding)


question again: Same effect on a page with proper utf charset?
answer: YES
(assumed only one / the same proper utf font is used by the browser/os)

then, i guess, it's rather a CSS problem of rendering margins and padding by this

(f#@?$&g IE )

[Heiko H.]

Same effect on a page with proper utf charset?

YES!

[Jensensen]

check / compare sliding door css settings (top nav) of: [x]

(don't know right know if it works with Japanese (and/or IE8) but works fine with IE6/7, opera, safari, ff...)

[juergen]

How about this:

Code: Select all

<td><div id="header"><ul><li id="current">

double id no good IE in tables ?!

[Jensensen]

my brother who's an expert in Japanese Studies said: "jau, das iss echtes Japanisch" --> correct.

i was wondering because - in my opinion - the mistake seems to become visual only for expressions (words, letters) that look [my view] somehow different... [visually] ... in your screen shot.

so, after all, nothing, no new explanation / no solution regarding typeface, utf, language, charset...

==> furthermore i guess this question is concerning CSS

[DeXXus]

I may be too late -or- way off base BUT a quick visit with Firefox using Firebug gives me a 404 NOT FOUND error for this file:

http://www.kangaroo-stop.de/css/menu.css

Code: Select all

<link href="css/menu.css" rel="stylesheet" type="text/css" />

Is this file supposed to help style that menu? Is it really nonexistent or at different path?

[Jensensen]

Hi DeXXus,

very happy, that you are back on the board!

You are right - but, FF-web-dev-tools on mac said:

(menu.css)
"There are no rules in this stylesheet."

[Jensensen]

#header LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 9px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
MARGIN: 0px;
BACKGROUND: url('../../picture/menu/left.gif') no-repeat left top;
FLOAT: left;
}
#header A {
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 4px;
PADDING-LEFT: 3px;
PADDING-TOP: 5px;
DISPLAY: block;
FONT-WEIGHT: bold;
BACKGROUND: url('../../picture/menu/right.gif') no-repeat right top;
FLOAT: left;
COLOR: #909090;
TEXT-DECORATION: none
}

not needed --> doubled floats li + a

that's why you set it then to:

#header A {
FLOAT: none
}

better use top/bottom paddings with --> li instead with a!!!


btw: better use small letters...