HTML et JavaScript

Problème dans Firefox, mais d'accord avec Internet Explorer.
J'ai beaucoup essayé mais je n'ai pas encore résolu. Aidez-moi, s'il vous plaît.HTML et JavaScript

En fait, le problème ici est que, il n'est pas dans l'ordre de formatage dans Firefox. mais affiche sur Internet Explorer.

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>HOME</title> 
    <link rel="stylesheet" href="dropdown.css" type="text/css" /> 
    <script type="text/javascript" src="dropdown.js"></script> 
    <!-- /* below javascript function is to handle the "Enter" key form submission */ --> 
    <script language="javascript"> 
    </script> 
    <script type="text/javascript"> 
     function change1(){ 
     document.getElementById('id1').style.display='block' 
     document.getElementById('id2').style.display='none' 
     document.getElementById('id3').style.display='block' 
     document.getElementById('id4').style.display='none' 
     document.getElementById('body1').style.display='block' 
     document.getElementById('body2').style.display='none' 
     document.home_page.reg_id.focus(); 
     } 
     function change2(){ 
     document.getElementById('id1').style.display='none' 
     document.getElementById('id2').style.display='block' 
     document.getElementById('id3').style.display='none'  
     document.getElementById('id4').style.display='block'  
     document.getElementById('body1').style.display='none'  
     document.getElementById('body2').style.display='block'  
     document.home_page.uname.focus(); 
     } 
    </script> 
    <!-- end of "enter" key handling functions. --> 
    </head> 


<form method="POST" action="home_page.php" name="home_page"> 
    <table width="320" height="200" border="1"> 
    <tr style="width:315px;" align="center"> 
    <td align="center" style="background-repeat:no-repeat;" bgcolor="#000099" width="155" height="28" id="id1" onClick="change1()"></td> 
    <td align="center" bgcolor="#009900" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id2" onClick="change1()"></td> 
    <td align="center" style="background-repeat:no-repeat;" bgcolor="#009900" width="155" height="28" id="id3" onClick="change2()"></td> 
    <td align="center" bgcolor="#000099" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id4" onClick="change2()"></td> 
    </tr> 
    <tr> 
    <td colspan="2" id="body1"> 
    <table width="318" height="44" border="0"> 
    <tr> 
    <td width="318" height="40" align="center"> 
    <span class="loginstyle3">Registration Status</span> 
    </td> 
    </tr> 
    </table></td> 
    <td colspan="2" id="body2" style="display:none;"> 
    <table width="318" height="45" border="0"> 
    <tr> 
    <td width="107" height="41" align="center" background="images/glossy1grey.gif"> 
    <span class="loginstyle3">Login Entry </span> 
    </td> 
    </tr> 
    </table> 
    </td> 
    </tr> 
    </table> 
<!-- below block of code is to set login page after login attempt and failed --> 
<script type="text/javascript">change2()</script> 
</form> 
</body> 
</html>

Source

2010-06-30 Anup Prakash

J'ai corrigé votre formatage ... mais où est votre balise d'ouverture ''? –

votre problème sur mozilla est? – Salil

Peut-être que vous devriez poser une question pour obtenir une réponse! ;-) –

Je ne pense pas que la définition des cellules de table (<td> éléments) pour être "display: block" va bien marcher dans Firefox. Les cellules de table ont leur propre type "display", et si vous les faites "display: block" le navigateur va faire ce que vous demandez. Notez que "display: block" est et non simplement le contraire de "display: none".

Essayez d'utiliser "display: table-cell" au lieu de "block".

éditer — J'ai essayé ceci et c'est sans aucun doute le problème.

Source

2010-06-30 14:51:41 Pointy

Super! Merci beaucoup. Superbe réponse. Résolvez tout mon problème. Mais prêt à poser d'autres questions. Vous devrez y assister. Encore merci. :-) –

Votre problème dans FF

document.home_page.uname is undefined 
Line 27

Source

2010-06-30 14:28:54 Redlab

en fait, IE 8 donne le même problème: D – Redlab

@Nick Craver: Désolé! J'ai raté l'étiquette du corps. mais il est présent dans mon fichier html. @Salil et @Jhominal: Mon problème est dans mozilla est-ce. Son formatage n'est pas comme je veux le voir (ce qui est visible dans Internet Explorer8). Cela devient totalement hors de contrôle. La taille de l'onglet de couleur devient complète dans Mozilla, alors que dans IE8, c'est ok. @Michael Lumbroso: Oui, j'ai raté l'uname (uname.text). Je l'ai utilisé dans mon projet. Becoz de l'espace de complexité, je l'ai enlevé. Il va juste jeter une erreur javascript. Retirez simplement cette ligne. @all: Il suffit de copier et coller tout le code, puis essayez avec mozilla & IE8 –

Votre problème, @Anup Prakash, est avec votre script qui définit les éléments de la cellule de tableau à "display: block". Vous dites explicitement au navigateur de ne pas afficher ces cellules de type tableau. – Pointy

-1

La chose la plus évidente pour moi est que vous utilisez <LINK> et <META> étiquettes à fermeture automatique dans ce qui n'est probablement pas un fichier XHTML. Ceux-ci sont destinés à être laissés ouverts. Essayez

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HOME</title> 
<link rel="stylesheet" href="dropdown.css" type="text/css" >

à la place. IIRC Firefox ne lit pas le lien vers votre fichier css si le tag est à fermeture automatique, car il est présumé vide.

Source

2010-06-30 21:22:51 FK82

Les balises LINK et META fermées sont entièrement valides en HTML normal. Vous n'avez juste pas ** à ** le faire. – ceejayoz

@ ceejayoz: lisez de plus près. J'ai dit que Firefox ne l'aime pas. C'est un fait, essayez-le. – FK82

Les problèmes que vous avez sont

votre TD hérite de la hauteur = 200 de la table
votre TD a display: block qui l'oblige sur une nouvelle ligne

Pourquoi vous utilisez des tables pour cela? Ils ajoutent beaucoup de tags supplémentaires inutiles. Avoir une lecture sur CSS, c'est le futur (et le présent ..)!

Source

2010-07-05 13:27:29

HTML et JavaScript

Répondre

Questions connexes