SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/Hide works with Explorer but does something strange with Mozilla!

    Hello,
    I have a very simple code: An array with 3 columns and 1 row.
    When the user clicks on "insert", another row appears below the 1st one.
    When the user clicks on "cancel" (button from the 2nd row), the row disappear.
    The code works perfectly with Explorer 6.0 but does not work with Mozilla FireFox 5.0.
    With Mozilla, instead of one row with 3 columns, I get 3 rows of one columns!!!


    Please, help me!!! My code must work with both browsers!!!

    Code:
    <html>
    <title>InitialTriggerSelection</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <%@ include file="javascriptLib.html" %>
    <head>
    <script language=JavaScript>
    
    function reDirect(target,el)
    {
      if (target == 1) // Insert
      {
        document.getElementById('new_0').style.display = 'block';
        document.getElementById('num_0').style.display = 'block';
        document.getElementById('its_value_0').style.display = 'block';
        document.getElementById('canc_button_0').style.display = 'block';
      }
    
      if (target == 3) // Cancel
      {
        document.getElementById('new_0').style.display = 'none';
        document.getElementById('num_0').style.display = 'none';
        document.getElementById('its_value_0').style.display = 'none';
        document.getElementById('canc_button_0').style.display = 'none';
      }
    }
    </script>
    </head>
    <body>
    <%@page language="java" %>
    <%@ page import="java.util.*"%>
    <%@ page import="javax.servlet.*, javax.servlet.http.*"%>
    <%@ page import="javax.servlet.http.HttpServletRequest"%>
    <center>
    <form onSubmit="return false" method="post" name="my_form" action="">
    <table border="2">
    <tbody>
    <tr><th colspan="3">TEST FOR MOZILLA</th></tr>
    <tr>
      <td>1</td>
      <td><input type=text name=its_0 readonly value="value_0"></td>
      <td><input type="button" class="buttons" onClick="reDirect(1,this)" value="Insert"></td>
    </tr>
    <tr id="new_0" style="display:none;">
      <td id="num_0" style="display:none;">-</td>
      <td id="its_value_0" style="display:none;">
        <select name="its_value_0" onChange="">
          <option value="">Select a value...</option>
          <option value="value_0">value_0</option>
          <option value="value_1">value_1</option>
          <option value="value_2">value_2</option>
      </td>
      <td id="canc_button_0" style="display:none;">
        <input type="button" class="buttons" onClick="reDirect(3,this)" value="Cancel"></td>
    </tr>
    </tbody>
    </table>
    </form>
    </body>
    </html>

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't use "display = block" for table elements. Technically, they aren't block level containers - they are table elements.

    So, for a <tr>, the CSS display property would be "table-row" and for a <td> it would be "table-cell"

    If you change the "block" to an empty string, you'll find your code will work in Firefox and IE

    http://www.w3.org/TR/CSS21/visuren.html#display-prop
    Last edited by jtrelfa; Feb 6, 2007 at 06:51. Reason: Added link to CSS specification

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Also, you should get a DOCTYPE (see the Typical Usage bit) and your <center> tag isn't closed. But in any case, you shouldn't be using <center>, it's deprecated.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your answers... nevertheless I must be doing something incorrect because I change what you told me to change (or what I understood I should do!) and this time nothing happens!!

    I have changed the code for :
    Code:
    document.getElementById('new_0').style.display = 'table_row';
    document.getElementById('num_0').style.display = 'table_cell';
    document.getElementById('its_value_0').style.display = 'table_cell;
    document.getElementById('canc_button_0').style.display = 'block';

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I read again what you said.... it works!!! Thank you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •