HTML and JavaScript_问答_开发者_运维开发者技术经验分享

Problem in Firefox, but ok with Internet Explorer.

I tried a lot but not solve yet. Please help me.

Actually the problem over here is that, it is not in formatte order in firefox. but is displaying on in 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="displa开发者_运维知识库y: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>

I don't think that setting table cells (<td> elements) to be "display: block" is going to work out well in Firefox. Table cells have their own "display" type, and if you make them "display: block" the browser is going to do what you ask. Note that "display: block" is not simply the opposite of "display: none".

Try using "display: table-cell" instead of "block".

edit — I've tried this and it's definitely what the problem is.

Your problem in FF

document.home_page.uname is undefined
Line 27

The problems you have are

your TD is inheriting the height=200 from the TABLE
your TD has display: block which forces it onto a new line

Why are you using tables for this? They add a lot of extra, unnecessary tags. Have a read up on CSS, it's the future (and the present..)!

The most obvious thing to me is that you use self closing <LINK> and <META> tags in what is probably not a XHTML file. Those are meant to be left open. Try

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

instead.

IIRC Firefox does not read the link to your css file if the tag is self closing, because it is presumed empty.