Arghhhh this had been stressing me out for ages!

I have a for loop in my script which generates div's with thumbnail images inside them.

here is my code:

<form id="form2" name="form2" method="post" action="">
      <fieldset>
      <legend>Image select</legend>
      
      <?php
      include "../conn.php";
      
      //get photo names
        $sql=mysql_query("SELECT * FROM photos WHERE model='name'");
        if(!$sql)
            {
                echo 'MySQL Error: '.mysql_error();
            }
        
        while($row=mysql_fetch_array($sql))
            {
                echo '<div class="modelthumb"><p>
                <img src="../Images/Photos/'.$row['file'].'" /></p>
                <form id="form'.$row['id'].'" name="form'.$row['id'].'" 
                method="post" action="index.php" class="zero">
                <input name="hiddenField" type="hidden" 
                value="'.$row['id'].'" />
                <input type="submit" name="Submit'.$row['id'].'" value="Delete" />
                </form>
                </div>';
            }
      ?>
        </fieldset>
    </form>

but the code produced turns out like this:

<form id="form2" name="form2" method="post" action="">
      <fieldset>
      <legend>Image select</legend>
      
      <div class="modelthumb"><p>
                <img src="../Images/Photos/5.jpg" /></p>
                <form id="form3" name="form3" 
                method="post" action="index.php" class="zero">
                <input name="hiddenField" type="hidden" 
                value="3" />
                <input type="submit" name="Submit3" value="Delete" />
                </form>
                </div><div class="modelthumb"><p>
                <img src="../Images/Photos/7.jpg" /></p>
                <form id="form5" name="form5" 
                method="post" action="index.php" class="zero">
                <input name="hiddenField" type="hidden" 
                value="5" />
                <input type="submit" name="Submit5" value="Delete" />
                </form>
                </div><div class="modelthumb"><p>
                <img src="../Images/Photos/8.jpg" /></p>
                <form id="form6" name="form6" 
                method="post" action="index.php" class="zero">
                <input name="hiddenField" type="hidden" 
                value="6" />
                <input type="submit" name="Submit6" value="Delete" />
                </form>
                </div><div class="modelthumb"><p>
                <img src="../Images/Photos/9.jpg" /></p>
                <form id="form7" name="form7" 
                method="post" action="index.php" class="zero">
                <input name="hiddenField" type="hidden" 
                value="7" />
                <input type="submit" name="Submit7" value="Delete" />
                </form>
                </div>        </fieldset>
    </form>

Notice how all of the code is more indented than the first div tag. I think it's this that is what is causing an unnecesary gap in the first div in IE6. This is out of the 4 div's that are output onto the screen. It could be down to something else but I've tried a lot of different things and nothing seems to work!

Hi there,

Run it through w3schools validator to check the markup.

Anyway, having a real quick look - you have html form inside form, that will cause you a whole load of trouble... you shouldnt need form within form, tidy that up...

any the reason you have gaps is because each form tag puts a new line space... you can fix it by putting

style="margin-bottom:0;"

inside your form tags

Cheers
Sir P

thanks! removing the main form tag fixed it

no worries, good work.