PDA

View Full Version : HELP - Pop up menu appears wrong



studioduran
Feb 24th, 2010, 10:35 AM
Hello,

I'm having the following problem: my pop-up menu appears OK on Firefox and Safari, but it appears wrong on Explorer. I'm writing in Japanese though, I set it up to appear horizontal but the letters appear vertical...

Ex. pge-research.com/jet

Any tips to fix this problem?

Thanks,
SD

abduraooft
Feb 24th, 2010, 10:44 AM
Ex. pge-research.com/jet

Any tips to fix this problem? Is that a link to your page? I get
Sorry, the page you requested was not found.

Additionally, a 410 Gone error was encountered while trying to use an ErrorDocument to handle the request.

studioduran
Feb 24th, 2010, 10:47 AM
Try this one: pge-research.com/jet2

Thanks a lot !

abduraooft
Feb 24th, 2010, 11:06 AM
:eek: Have you heard about markup validity (http://validator.w3.org/docs/help.html#validation_basics)? Don't you know that fact that using tables for making layout is very bad (http://www.hotdesign.com/seybold/)?

To expect a cross browser support, you need to provide a valid markup to the browsers. The code for your drop down(generated by javascript) is
<span id="menuContainer"><div style="position: absolute; z-index: 1; left: -200px; top: -200px; visibility: hidden; color: rgb(255, 255, 255); background-color: rgb(255, 255, 255); width: 216px; height: 41px;" id="menuLayer0">
<div onmouseout="mouseoutMenu();" style="position: absolute; z-index: 1; left: 1px; top: 1px; height: 39px; width: 214px; background-color: rgb(255, 255, 255);" id="menuLite0">
<div style="position: absolute; left: 1px; top: 1px; height: 38px; width: 213px; background-color: rgb(255, 255, 255);" id="menuFg0">
<div style="position: absolute; left: 0px; top: 0px; font-family: MS ゴシック; font-size: 12px; width: 212px; height: 18px; background-color: rgb(245, 238, 220); visibility: inherit;" id="menuItem0"><div style="position: absolute; left: 4px; top: 2px; color: rgb(119, 101, 59);" id="menuItemText0">トランプ・ワイキキ・ビーチ </div>
<div style="position: absolute; left: 4px; top: 2px; color: rgb(18, 45, 19); visibility: hidden;" id="menuItemHilite0">トランプ・ワイキキ・ビーチ </div></div><div style="position: absolute; left: 0px; top: 19px; font-family: MS ゴシック; font-size: 12px; width: 212px; height: 18px; background-color: rgb(245, 238, 220); visibility: inherit;" id="menuItem1"><div style="position: absolute; left: 4px; top: 2px; color: rgb(119, 101, 59);" id="menuItemText1">アラモアナ・ホテル </div>
<div style="position: absolute; left: 4px; top: 2px; color: rgb(18, 45, 19); visibility: hidden;" id="menuItemHilite1">アラモアナ・ホテル </div></div> <div onclick="onMenuItemAction(null,this);" style="position: absolute; left: 0px; top: -30px; z-index: 2;" id="focusItem0"> </div>
</div>
</div>
</div>
<div style="position: absolute; z-index: 1; left: -200px; top: -200px; visibility: hidden; color: rgb(255, 255, 255); background-color: rgb(255, 255, 255); width: 216px; height: 60px;" id="menuLayer1">
<div onmouseout="mouseoutMenu();" style="position: absolute; z-index: 1; left: 1px; top: 1px; height: 58px; width: 214px; background-color: rgb(255, 255, 255);" id="menuLite1">
<div style="position: absolute; left: 1px; top: 1px; height: 57px; width: 213px; background-color: rgb(255, 255, 255);" id="menuFg1">
<div style="position: absolute; left: 0px; top: 0px; font-family: MS ゴシック; font-size: 12px; width: 212px; height: 18px; background-color: rgb(245, 238, 220); visibility: inherit;" id="menuItem2"><div style="position: absolute; left: 4px; top: 2px; color: rgb(119, 101, 59);" id="menuItemText2">シグネチャー MGM グランド </div>
<div style="position: absolute; left: 4px; top: 2px; color: rgb(18, 45, 19); visibility: hidden;" id="menuItemHilite2">シグネチャー MGM グランド </div></div><div style="position: absolute; left: 0px; top: 19px; font-family: MS ゴシック; font-size: 12px; width: 212px; height: 18px; background-color: rgb(245, 238, 220); visibility: inherit;" id="menuItem3"><div style="position: absolute; left: 4px; top: 2px; color: rgb(119, 101, 59);" id="menuItemText3">パームス・プレイス </div>
<div style="position: absolute; left: 4px; top: 2px; color: rgb(18, 45, 19); visibility: hidden;" id="menuItemHilite3">パームス・プレイス </div></div><div style="position: absolute; left: 0px; top: 38px; font-family: MS ゴシック; font-size: 12px; width: 212px; height: 18px; background-color: rgb(245, 238, 220); visibility: inherit;" id="menuItem4"><div style="position: absolute; left: 4px; top: 2px; color: rgb(119, 101, 59);" id="menuItemText4">プラチナ・ホテル&スパ </div>
<div style="position: absolute; left: 4px; top: 2px; color: rgb(18, 45, 19); visibility: hidden;" id="menuItemHilite4">プラチナ・ホテル&スパ </div></div> <div onclick="onMenuItemAction(null,this);" style="position: absolute; left: 0px; top: -30px; z-index: 2;" id="focusItem1"> </div>
</div>
</div>
</div>
<div style="position: absolute; z-index: 1; left: -300px; top: -300px; visibility: hidden; color: rgb(255, 255, 255); background-color: rgb(255, 255, 255); width: 124px; height: 22px;" id="menuLayer2">
<div onmouseout="mouseoutMenu();" style="position: absolute; z-index: 1; left: 1px; top: 1px; height: 20px; width: 122px; background-color: rgb(255, 255, 255);" id="menuLite2">
<div style="position: absolute; left: 1px; top: 1px; height: 19px; width: 121px; background-color: rgb(255, 255, 255);" id="menuFg2">
<div style="position: absolute; left: 0px; top: 0px; font-family: MS ゴシック; font-size: 12px; width: 120px; height: 18px; background-color: rgb(245, 238, 220); visibility: inherit;" id="menuItem5"><div style="position: absolute; left: 4px; top: 2px; color: rgb(119, 101, 59);" id="menuItemText5">トランプ・ソーホー </div>
<div style="position: absolute; left: 4px; top: 2px; color: rgb(18, 45, 19); visibility: hidden;" id="menuItemHilite5">トランプ・ソーホー </div></div> <div onclick="onMenuItemAction(null,this);" style="position: absolute; left: 0px; top: -30px;" id="focusItem2"> </div>
</div>
</div>
</div>
</span> which is invalid as you can't have a block level element like <div> inside an inline element like <span>. I'd recommend you to check http://htmldog.com/articles/suckerfish/dropdowns/ to learn the making a CSS based drop down menu, which i more reliable than a javascript based one.

studioduran
Feb 24th, 2010, 11:21 AM
Not familiar at all... that's why I created the standard template on Dreamweaver... just by filling in the info.