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>

Answers:

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.

Well there is a typo in the code

html += ....

should be

post += ....

This line: show.splice(index, 1);

should be: array.splice(index, 1);

You are removing one element from your array.

This line: function remove(index)

should be: function removeComment(index)

You are calling removeComment when you click the check box so your function needs to be called removeComment.

Just set .style.backgroundColor: http://jsfiddle.net/VvZZD/2/.

function showDetails(var1) {
   document.cubicle.employee.value=var1;

   var status = document.cubicle.status.value;
   var color;
   if(status == "0") color = 'yellow';
   if(status == "1") color = 'red';
   document.cubicle.employee.style.backgroundColor = color;
}

using jquery you can do like this:

  function changeStyle(val) {
       $('.employee').attr('value')=val;
        var pos = $('.employee').attr('value');
        var col = (pos=='0')? "yellow" : "red";
      $('.employee').css('color', col);
    }

You can make a javascript method where you can pass the status value either 1 or 0 and then use " document.bgColor "method to change the color using if conditions...

you can take help from here: http://www.javascripter.net/faq/backgrou.htm here dropdownlist value is selected... but you can use any control or hidden value...

HTML and JavaScript

Answers:

Tags

Recent Questions

Top Questions