Large White area at top of page

  • Profile Image
    waggariverside
    Asked on April 06, 2012 at 01:27 AM

    Hi,

    I am having troubles with my embedded form. I have a large white area at the top of the page:

    http://www.waggariversideapartments.com.au/index1.php?p=bookings

    I have tried

    .form-all {
        padding-top: 0;
    }

    and

    .form-all {
    padding-top: 0;
    margin-top: -10px;
    }

     

    but all to no avail it will not move.

    I have added text by itself and it works fine. Its just when I add the form I get t his huge white space.


    Thanks in advance

    Damian

  • Profile Image
    liyam
    Answered on April 06, 2012 at 02:23 AM

    The reason why the form goes down is because of your form's header (the one with the title "Make an Inquiry").  The form-header-group class has the property clear: both;. This causes your float to end, thus moving the div and the others to go down. 

    Here is the style attributes of the form-header-group class:

    .form-header-group{
    background:#f5f5f5;
    border-bottom:1px solid #ccc;
    padding:12px;
    clear:both
    }

    Since you have the actual HTML source code placed in the form, simply removing the class name will fix it.

  • Profile Image
    abajan
    Answered on April 06, 2012 at 04:09 AM

    @Damian

    Unless there's some compelling reason to use the full source, embedding the form via an iFrame (with no injected CSS) should solve the problem.

    However, if absolutely need to use the full source and want to remove the large white area above the form while retaining the heading's current style, instead of removing the class name you would have to embed the compressed and refined version of the form, remove the clear:both; declaration from the .form-header-group rule in the form.css file and in the form's HTML file add the style attribute indicated below to the div whose ID is cid_2

    (Click image to zoom to actual size)


    If you need clarification on anything, do let us know.