Tutorial :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="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>  


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" >    


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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »