Element Added to HTML DOM by Javascript CSS Problem

[jcobban]

I have a page containing a tabular display of information about the children in a family. Some of the rows of the table are generated when the page is created by PHP, but others are added by Javascript as the user adds children to the family. The structure of the HTML is identical in both cases. The Javascript code creates a new row by cloning an existing row to ensure that the structure is identical. An example is as follows:

Code: Select all

   <tr id='child0'>
     <td class='name'>
       <input class='male'
         name='CGiven0' 
         id='CGiven0'
         value='Neil' 
         type='text' size='18' maxlength='120'>
       <input type='hidden'
         name='CIdir0' 
         id='CIdir0'
         value='24936'>
       <input type='hidden'
         name='CIdcr0' 
         id='CIdcr0'
         value='21444'>
       <input type='hidden'
         name='CGender0' 
         id='CGender0'
         value='0'>
     </td>
     <td class='name'>
       <input class='male'
         name='CSurname0'
         id='CSurname0' 
         value='Gordon'
         type='text' size='10' maxlength='120'>
     </td>
     <td class='name'>
       <input class='actleft'
         name='Cbirth0'
         id='Cbirth0' 
         value='7 Oct 1878' 
         type='text' size='8' maxlength='100'>
       <input name='Cbirthsd0'
         id='Cbirthsd0' 
         type='hidden' 
         value='18781007'>
     </td>
     <td class='name'>
       <input class='actleft'
         name='Cdeath0'
         id='Cdeath0' 
         value=''
         type='text' size='8' maxlength='100'>
     </td>
     <td>
       <button type='button' class='button'
         id='editChild0'>
      Edit Child
       </button>
     </td>
     <td>
       <button type='button' class='button'
         id='detChild0'>
      Detach&nbsp;Child
       </button>
     </td>
   </tr>

Everything works fine except for the <button>s in the last 2 cells of the row. The HTML page has a hierarchy of style pages defined as:

Code: Select all

    <link rel='stylesheet' type='text/css' href='http://www.jamescobban.net/styles.css'/>
    <link rel='stylesheet' type='text/css' href='editMarriages.css'/>

In the first stylesheet the class is defined as:

Code: Select all

    button.button {
      font-family:   sans-serif;
      font-weight:   bold;
      font-size:   80%;
      text-align:   center;
      background-color:#E0E0E0;
      border-top:   2px solid white;
      border-left:   2px solid white;
      border-bottom:   3px solid #404040;
      border-right:   3px solid #404040;
      color:      black;
      padding:   0px 12px 0px 12px;
      }

In the second stylesheet it is defined as:

Code: Select all

    button.button {
      font-family:   sans-serif;
      font-weight:   bold;
      font-size:   80%;
      text-align:   center;
      background-color:#E0E0E0;
      border-top:   2px solid white;
      border-left:   2px solid white;
      border-bottom:   3px solid #404040;
      border-right:   3px solid #404040;
      color:      black;
      padding:   0px 12px 0px 12px;
      width:      15em;
      }

As you can see the only difference is that the second style sheet defines the width. That is because in this page the button is located in a table and I want the buttons to occupy the full width of the cell, so I make them wide enough that they are just wider than the label in the table header row. The problem is that these buttons are not being displayed in the requested width, which makes the rows added by Javascript look different from the rows generated by PHP. When I use Firebug to look at the rows the HTML definition looks identical but Firebug also shows that in the added rows the second stylesheet is not being used, so the buttons are only being styled according to the first stylesheet, which does not have a width specification, and therefore the buttons are just wide enough to hold the button text.

Why are the added rows not being styled by the second stylesheet?

[LoudNoise]

Moving to web development.

[jcobban]

Moving to web development.

Since there is obviously nobody on this forum who is able to help me with this problem, could someone suggest to whom I should apply for assistance?

[Frenzie]

You could always try Stack Overflow, but first I'd recommend a read through http://sscce.org/