JeuWeb Créez votre jeu par navigateur !

Maegia · (Modification du message : 17-01-2007, 11:09 PM par Maegia.)

Bonjour ! Bon, encore une fois, je viens quémander un peu de votre temps pour quelque chose n'ayant rien à voir (ou peu...) avec PHP. Il s'agit de mon script de menu, trouvé sur dynamicdrive.com, qui galère légèrement sous Firefox. Le menu en question est celui présent sur www.maegia.com . Sous IE, tout est nickel... Mais sous FF, le menu apparaissant est toujours décaler de 5 ou 10px vers le bas, alors que le haut du menu apparaissant devrait être à la même hauteur que le haut du bouton auquel il est rattacher. J'suis peut-être pas clair... Enfin, ouvrez une page sous IE et une page sous FF et vous verrez bien !

Bref, si quelqu'un saurait me trouver le moyen de rendre ça identique pour les deux navigateurs, je lui en serais éternellement reconnaissant et je lui donnerai même un bisou !

Voilà le code du menu :

Code PHP :
<?php 

<style type="text/css">

#dropmenudiv{

    position:absolute;

    BACKGROUND-IMAGE: URL(./images/menu/arriere.gif);

    border-bottom-width: 2;

    font:normal 12px Verdana;

    line-height:18px;

    z-index:100;

}

#dropmenudiv a{

    width: 100%;

    display: block;

    text-indent: 10px;

    border-bottom: 0px solid black;

    padding: 1px 0;

    text-decoration: none;

    font-weight: normal;

}

#dropmenudiv a:hover{ /*hover background color*/

    background-color: #a9a47c;

}

</style>

<script type="text/javascript">

/***********************************************

* AnyLink Vertical Menu- © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

//Contents for menu 1

var menu1=new Array()

menu1[0]='<img src="../images/menu/small_top.gif">'

menu1[1]='<a href="../register.php" class="menu">- Register</a>'

menu1[2]='<a href="../terms.php" class="menu">- Terms & Conditions</a>'

menu1[3]='<a href="../forgot.php" class="menu">- Forgot your password ?</a>'

menu1[4]='<img src="../images/menu/small_bottom.gif">'

//Contents for menu 2

var menu2=new Array()

menu2[0]='<img src="../images/menu/small_top.gif">'

menu2[1]='<a href="../ranking.php" class="menu">- General Ranking</a>'

menu2[2]='<a href="../guild_ranking.php" class="menu">- Guild Ranking</a>'

menu2[3]='<a href="../serverstatus.php" class="menu">- Server Status</a>'

menu2[4]='<a href="../statistics.php" class="menu">- Overall Statistics</a>'

menu2[5]='<a href="../latest_combat.php" class="menu">- Latest Combats</a>'

menu2[6]='<img src="../images/menu/small_bottom.gif">'

//Contents for menu 3

var menu3=new Array()

menu3[0]='<img src="../images/menu/small_top.gif">'

menu3[1]='<a href="../forum/" class="menu" target="_blank">- Forum</a>'

menu3[2]='<a href="../faq.php" class="menu">- FAQ</a>'

menu3[3]='<a href="../updates.php" class="menu">- Recent Updates</a>'

menu3[4]='<a href="../encyclopedia.php" class="menu">- Encyclopedia</a>'

menu3[5]='<a href="../whatismaegia.php" class="menu">- What is Maegia ?</a>'

menu3[6]='<a href="../links.php" class="menu">- Links & Download</a>'

menu3[7]='<a href="../google.php" class="menu">- Search the Web</a>'

menu3[8]='<a href="../credits.php" class="menu">- Credits</a>'

menu3[9]='<img src="../images/menu/small_bottom.gif">'

var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)

var horizontaloffset=8 //horizontal offset of menu from default location. (0-5 is a good value)

/////No further editting needed

var ie4=document.all

var ns6=document.getElementById&&!document.all

if (ie4||ns6)

document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){

var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

var parentEl=what.offsetParent;

while (parentEl!=null){

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

parentEl=parentEl.offsetParent;

}

return totaloffset;

}

function showhide(obj, e, visible, hidden, menuwidth){

if (ie4||ns6)

dropmenuobj.style.left=dropmenuobj.style.top=-500

dropmenuobj.widthobj=dropmenuobj.style

dropmenuobj.widthobj.width=menuwidth

if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")

obj.visibility=visible

else if (e.type=="click")

obj.visibility=hidden

}

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

function clearbrowseredge(obj, whichedge){

var edgeoffset=0

if (whichedge=="rightedge"){

var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15

dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)

edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth

}

else{

var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset

var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?

edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight

if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)

edgeoffset=dropmenuobj.y

}

}

return edgeoffset

}

function populatemenu(what){

if (ie4||ns6)

dropmenuobj.innerHTML=what.join("")

}

function dropdownmenu(obj, e, menucontents, menuwidth){

if (window.event) event.cancelBubble=true

else if (e.stopPropagation) e.stopPropagation()

clearhidemenu()

dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv

populatemenu(menucontents)

if (ie4||ns6){

showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

dropmenuobj.x=getposOffset(obj, "left")

dropmenuobj.y=getposOffset(obj, "top")

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"

}

return clickreturnvalue()

}

function clickreturnvalue(){

if (ie4||ns6) return false

else return true

}

function contains_ns6(a, b) {

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}

function dynamichide(e){

if (ie4&&!dropmenuobj.contains(e.toElement))

delayhidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

delayhidemenu()

}

function hidemenu(e){

if (typeof dropmenuobj!="undefined"){

if (ie4||ns6)

dropmenuobj.style.visibility="hidden"

}

}

function delayhidemenu(){

if (ie4||ns6)

delayhide=setTimeout("hidemenu()",disappeardelay)

}

function clearhidemenu(){

if (typeof delayhide!="undefined")

clearTimeout(delayhide)

}

</script>

Raoull · 17-01-2007, 11:36 PM

Pour info, sous opera ca passe nickel.
Ya donc que sous FF que ca coince...

J'allais sortir une théorie, mais je me suis rendu compte que c'était faux...
Donc pour l'instant je ne peux pas trop t'aider, dsl.

Maegia · 17-01-2007, 11:51 PM

Ha, merci pour l'info, je n'avais en effet pas testé sous Opéra !

gtsoul · 18-01-2007, 09:29 AM

Je suis peut-être aveugle mais je ne vois pas de différence ?
C'est à propos du menu déroulant ? Tu peux aussi le faire en css.

barst · 18-01-2007, 10:48 AM

La différence peut venir du fait que IE et Firefox ne gère pas les box de la même manière au nievau du border,padding et du margin.

Si ca vient de là, tu n'auras pratiquement pas de solution unique pour les 2 browsers.

Utilises donc un hack Firefox dans ton CSS pour corriger ton léger décalage.

De mémoire, il faut ajouter quelques lignes dans ton css, incomprise par IE qui n'interprète plus le reste des éléments CSS pour ce tag alors que firefox va les interpréter et du coup seul Firefox fera le correctif.

Ca ressemble à un truc du genre

Citation :Div
{
padding:5px; // compris par tous
hack IE // à rechercher sous google car j'ai oublié la syntaxe
padding:0px; : compris seulement par Firefox
}
prochain tag compris par IE et firefox

gtsoul · 18-01-2007, 11:15 AM

Tu voulais dire ceci :

Code PHP :
<?php 

Div

{

padding:0px !important; /* compris par tous sauf par IE*/

padding:5px; /* compris seulement par Ie car il ne gère pas le !important*/

}

barst · (Modification du message : 18-01-2007, 12:13 PM par barst.)

J'en connaissais un autre mais je l'ai plus en tête...

Sinon voici un lien qui explique les différences sur les box entre IE et firefox : http://www.openweb.eu.org/ar
ticles/dimensions_boites_css/

EDIT : voici le hack que j'avais oublié dans cet article justement pour patcher le problème des box : http://tantek.com/CSS/Examples/boxmodelhack.html

Maegia · 19-01-2007, 05:33 PM

Vous l'inséreriez ou dans le code... ? J'ai eu beau tester de multiples manière, rien n'y fait. Et êtes-vous totalement certain qu'ils s'agissent d'une erreur de padding ? Car le padding horizontal est identique pour les deux navigateurs, il n'y a erreur que sur la hauteur à laquelle apparaît la boîte. Je ne trouve vraiment pas... :/

barst · 22-01-2007, 10:59 AM

Ca s'insère dans ton fichier css.

Bon après faut voir quelle propriété css foire....

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	[Javascript] problème de mouse hover	Argorate	19	6 911	07-08-2011, 01:17 AM Dernier message: Argorate
	Un tit problème de javascript	gameprog2	7	3 554	11-02-2009, 09:43 PM Dernier message: Anthor
	[Résolu] Problème javascript	loulouch	13	5 159	20-08-2008, 11:08 AM Dernier message: loulouch
	[Réglé] problème javascript	max	11	4 808	02-05-2007, 12:30 PM Dernier message: Plume
	problème onclick javascript	max	8	4 436	05-02-2007, 09:29 PM Dernier message: max