design changes with browser

Possible Duplicate:
HTML and JavaScript

Having problem in display in different browsers. It is showing great in IE8, but not in firefox. What i want to do is that,
a) I want to change the display box with pressing on colored headers. b) when will I press dark green header in table, it should display "registration status", c) when will I press dark red header in table, it should dispaly "login Entry".

Note: In firefox it is not showing in proper format. Each color is shoing in big block. While in IE8,it is displaying great.

For all the viewer please copy the below code, paste in notepad, save in HTML format, and test it in IE8 and firefox. And please help me to make it compatible in all the browser(specially in IE8 and firefox). Should be display same in both browsers.

<html>   
  <head>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
    <title>HOME</title>   
    <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'   
      }   
      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' 
      }   
    </script>   
    <!-- end of "enter" key handling functions. -->   
  </head>   
 <body>  
<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" bgcolor="#C6FDBD" style="background-repeat:no-repeat;"width="155" height="28" id="id1" onClick="change1()"></td>   
    <td align="center" bgcolor="#04C80A" style="background-repeat:no-repeat; display:none;" width="155" height="28" id="id2" onClick="change1()"></td>   
    <td align="center" bgcolor="#DF1E02" style="background-repeat:no-repeat;" width="155" height="28" id="id3" onClick="change2()"></td>   
    <td align="center" bgcolor="#FF998A" style="background-repeat:no-repeat; display:none;" 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>

ansaurus

tags:

views:

answers:

design changes with browser

related questions