Table issue in IE

[Shicky]

At a bit of a loss to workout how the hell this happened but it has, im 100% sure it wasn't like this before but guess I must have changed something and forgot. Must make clear this only happens in IE, in chrome and FF it looks fine.

Basically my table has a weird split in it between the first element and the rest. Here is how it looks:

Here is the HTML code:

 <form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
            <table id="rounded-corner" summary="Top Ten Tunes for Queen's Radio">
            <thead>
            <tr>
            <th class="rounded-artist" scope="col">ARTIST NAME</th>
            <th scope="col">SONG TITLE</th>
            <th scope="col">POSITION</th>
            <th scope="col">UPDATE</th>
            <th class="rounded-end" scope="col">REMOVE</th>
            </tr>
            </thead>
            <tbody>
             <?php echo $menuDisplay; ?>
             </tbody>
              <tfoot>
    		<tr>
        	<td colspan="4" class="rounded-foot-left"><em>Please ensure the same song is not entered twice into the system, there is no existing validation for it.</em></td>
        	<td class="rounded-foot-right">&nbsp;</td>
        	</tr>
    		</tfoot>
             </table>
             </form>

Here is the PHP code:

$menuDisplay .= '<form name="'.$pid.'" action="'.htmlentities($_SERVER['PHP_SELF']).'" method="post"><input type="hidden" name="songid" value="'.$pid.'" <tr><td>' . $artist . '</td><td>' . $song . '</td><td><input type="text" style="width:30px" id="position" name="position" maxlength="2" value=" ' . $position . '"</td><td><input type="submit" name="save" value="Update"></td><td> <input type="submit" onclick="return confirmDelete();" name="delete" value="Delete" /></td></tr></form> ';

I can see no reason why this is occuring, I guessed it must be styling but I dont know what attribute would effect one row and no others?

 

[SMB30]

Your echoing a form inside a table body, and before a table row. Pretty sure thats a markup no-no.

 

[Shicky]

Im pretty sure there was no issue with this before, I appreciate its probably not the best way to do things but its the only thing I could think of. Plus it functions fine in FF and chrome so surely it can be fine? W3C validator doesnt complain either

There's a form on each table row technically so if that was the issue there would be a huge break between each row?

 

[sist_si]

1. i know it's been mentioned, but for one i'd not be having "n" forms on a page. you only need one outside of the loop and the del/update buttons can pass the relevant id's to this single form with a it's own way of handling the relevant values in it.
It's cleaner and you haven't got 100 forms to do one form's job.

2. The form may have padding/margin on it if this hasn't been addressed in a stylesheet.
3. Inline 'style' tags are bad. create a stylesheet for the rows.

IMO, the "$menuDisplay" loop should only be outputting each of the rows.

 

[Shicky]

solved it, was indeed the surrounding form causing the issue.

Forgive me for my stupidity but how can I pass the the relevant id's in the buttons without the use of forms?

 

[SMB30]

You could use individual forms like so:

<td><form></form></td>

Inside the table cells like that should cause no formatting problems, but as said above I agree with the statement about having large numbers of forms, I dislike it too.

Another method would be to use one form wrapping the table and then use checkboxes to update or delete (rather like gmail's method).

The method I use these days is JQuery, with each button calling an ajax function to update and delete.

There are probably plenty of other ways!

 

[sist_si]

yea, i'd have one form, either wrapping the page or at the top of you table outside it and use a framework like jquery (for ease of coding) to call the 'update' or 'delete' fuction with a relevant key id. so, each row has a unique key appended to the id of the relevant fields then when you call your function to say update, it knows to get the fields appended with key "x". you can then populate the hidden fields in your single form with the relevant values and submit it via javascript.

edit: that said, you don't have to use jQuery. if you're referencing objects in the document by id, standard JavaScript will suffice...it's just more coding