Skip navigation
Currently Being Moderated

Weird top margin problem in repeat region

Apr 17, 2012 11:43 AM

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



  • Currently Being Moderated
    Apr 17, 2012 9:30 PM   in reply to drennan_uk

    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 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.

    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 8:39 AM   in reply to drennan_uk

    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.

    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 9:37 AM   in reply to drennan_uk

    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.

    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 9:52 AM   in reply to drennan_uk

    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.

    Mark as:
  • Currently Being Moderated
    Apr 19, 2012 6:03 PM   in reply to drennan_uk

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

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points