11 Replies Latest reply: Apr 19, 2012 6:03 PM by J Cellini RSS

    Weird top margin problem in repeat region

    drennan

      Hey all, My repeat region looks fine in all browsers except IE7. For some reason the 5th product onwards seems to have a bigger top margin (about 20px), which pushes the columns down. My code is valid and I've checked CSS and stray DIVs etc. I really don't get it as if the problem was with the repeated container DIV, surely it would affect every DIV? Can anyone shed any light? Here's the page and a snapshot below of the problem. thanks http://goo.gl/5rlgc

       

      screenshot.jpg

        • 1. Re: Weird top margin problem in repeat region
          J Cellini Community Member

          I doesn't look like a human being wrote this markup. Was this markup generated by some kind of Web application (to put it kindly)?

           

          Here's something that should work for IE 7. You should clear your floats for each line of images. So, first add the following rule to your stylesheet:

           

          .spacer { clear: left; }

           

          Each Image is wrapped in a div with a "productWrap" class. So, after the last one in each row, add the following div:

           

          <div class="spacer">

           

          So, for example, in the first row the last image is Alexia Couture. It's wrapped in the following productWrap div:

           

          <div class="productWrap"> 

          <img src="upload/03.jpg" alt="" class="image">

          <input name="ref" type="hidden" class="ref" value="03"  readonly="readonly">

          <input name="description" type="hidden" value="Stunning strapless wedding gown, with crystals and diamantes. The corset tie back has buttons running all the way down the back to the bottom of the train. A small bow with long ties can also be attached to the back." readonly="readonly">

           

          <div class="title1"><input name="formTitle" type="text"  class="titleClass" value="Alexia Couture" readonly="readonly"></div>

          <div class="price1"><input name="formPrice" type="text" class="price" value="£ 395" readonly="readonly"></div>

          <div class="size1"><input name="formSize" type="text"  class="size" value="Size 8-12" readonly="readonly"></div>

           

          <div class="zoom2"><input name="submit" type="button" value="" class="zoom zoomProduct" id="zoomProduct3"></div>

          </div>

          <div class="spacer">

           

          I included all the code between the opening div and the closing div for the productWrap class and then I added the div with the spacer class after the closing div for the productWrap..

           

          Add that line (the last one that I bolded) after the last productWrap div for each row and that should remedy your space problem.

          • 2. Re: Weird top margin problem in repeat region
            drennan Community Member

            The products are in a repeat region and are being pulled from a database, so I can;t put a spacer after the last one in each row.

            • 3. Re: Weird top margin problem in repeat region
              J Cellini Community Member

              Can you use a table then instead of floating the divs? If you float the divs, you will not be able to get it to work in IE7.

              • 4. Re: Weird top margin problem in repeat region
                drennan Community Member

                Probably. Sorry, this is only my second database site. Do you mean a table in the repeat region, with a DIV inside the table, as I would need to absolutely position the price, size and designer. Thanks

                • 5. Re: Weird top margin problem in repeat region
                  J Cellini Community Member

                  Now that I think about it, I don't know if a table is the solution because you are not repeating rows of information. I'd have to give this more thought. Unfortunately, I have three classes I have to teach Thursday, Friday, and Saturday. After Saturday, if you haven't come up with solution, I will be able to give this some thought. It would be helpful if you can post the php code for the repeated regions.

                  • 6. Re: Weird top margin problem in repeat region
                    drennan Community Member

                    OK thanks. I was under the impression that a repeat region just duplicated whatever was inside it. I don't get why the problem only occurs from the 5th product onwards, and only in IE7.

                    • 7. Re: Weird top margin problem in repeat region
                      J Cellini Community Member

                      Welcome to the world of IE7. Again, if you post the php file that generates the repeated region, then maybe we can figure something out. If not me, then someone else.

                      • 8. Re: Weird top margin problem in repeat region
                        drennan Community Member

                        It's just what Dreamweaver inserts when I selected repeat region from the data objects menu, with a counter to stop duplicate IDs. By the way, I appreciate my code may not be perfectly structured.

                         

                        <?php

                        $counter = 0;

                        do {

                        $counter++;

                        ?>

                        <form action="zoom.php" method="post" name="form<?php echo $counter; ?>" id="form<?php echo $counter; ?>">

                        <div class="products">

                        <div class="productWrap"> 

                        <img src="upload/<?php echo $row_Recordset1['ref'];?>.jpg" alt="" class="image">

                        <input name="ref" type="hidden" class="ref" value="<?php echo $row_Recordset1['ref']; ?>"  readonly="readonly">

                        <input name="description" type="hidden" value="<?php echo $row_Recordset1['description']; ?>" readonly="readonly">

                        <div class="title1"><input name="formTitle" type="text"  class="titleClass" value="<?php echo $row_Recordset1['designer']; ?>" readonly="readonly"></div>

                        <div class="price1"><input name="formPrice" type="text" class="price" value="£ <?php echo $row_Recordset1['price']; ?>" readonly="readonly"></div>

                        <div class="size1"><input name="formSize" type="text"  class="size" value="Size <?php echo $row_Recordset1['size']; ?>" readonly="readonly"></div>

                        <div class="zoom2"><input name="submit" type="button" value="" class="zoom zoomProduct" id="zoomProduct<?php echo $counter; ?>"></div>

                        </div>

                        </div>

                        </form>

                        <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>

                        • 9. Re: Weird top margin problem in repeat region
                          drennan Community Member

                          I've stripped the whole page back and the problem seems to be with the form being inside the repeat region. The code below causes the alignment problem in IE7 from container six onwards and can be seen here http://goo.gl/BVjYv. If I remove the form surrounding the productWrap DIV, the alignment problem goes away. Does IE7 not like forms inside repeat regions or have I made a stoopid mistake somewhere? Thanks again

                           

                          <div id="wrapper">

                          <?php

                          $counter = 0;

                          do {

                          $counter++;

                          ?>

                           

                          <form action="zoom.php" method="post" name="form<?php echo $counter; ?>" id="form<?php echo $counter; ?>">

                          <div class="productWrap"></div>

                          </form>

                           

                          <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>

                          </div>

                          • 10. Re: Weird top margin problem in repeat region
                            drennan Community Member

                            OK, I got it. Form should be inside the productWrap DIV not surrounding it. Really didn't think it would be something so simple especially since it was fine in other browsers. Thanks for your help J Cellini

                            • 11. Re: Weird top margin problem in repeat region
                              J Cellini Community Member

                              I don't think I helped much but I'm glad you resolved the problem.