Why is empty space created after form in my page?

  • Profile Image
    hypnotic11us
    Asked on April 07, 2011 at 04:54 AM

    Hello!

    I am using Joomla for my site and I used the script code you provided to insert the form into my article. I noticed that a lot of empty space gets added after the form, inside my web page. And this is a major problem, because the bottom of the web page can't be accessed. Do you think that something inside my site css might be doing this? 

    Thank you very much!

    I really appreciate your service!

    Sincerely, 

    Liviu Lungu

  • Profile Image
    liyam
    Answered on April 07, 2011 at 05:19 AM

    Hello Liviu,

    Can you tell us what browser you are using?

    I have checked your webpage http://www.iubimnatura.org/in/index.php/component/content/article/index.php?option=com_content&view=article&id=181:inscrie-te-ca-voluntar and it does not show up the long white space.

    I used the following browsers: firefox, chrome, safari, and IE8.

    Let us know if you still have the white space problem.

    Thanks.

  • Profile Image
    hypnotic11us
    Answered on April 07, 2011 at 01:32 PM

    Hello Liyam!

    I usualy use Google Chrome as the main browser, and, after checking it in iexplorer and Firefox, I have noticed that this problem only occurs in Chrome, and it still does. That, in my opinion, is strange, especially because you also checked Chrome and it worked fine for you.

    At one moment I have wrapped the script into a div with a height of 1000 px. But remembering that I have posted my problem on this forum, I have removed that after 5 minutes. Perhaps you were checking it exactly in that time :).

    Anyway, it's good that Chrome is the only one with the problem, but is stil bad that the problem exists. 

    Any ideeas?

    Thank you very much for your support!

  • Profile Image
    liyam
    Answered on April 07, 2011 at 02:29 PM

    I've tried to figure out why it's happening to your browser and not mine since I checked just now and it's still working alright, until I zoomed the browser and it did show the long white space.

    Question: Is your Chrome browser set to 100% zoom by default?

    If not, setting the view to 100% and refreshing will definitely work.

    This problem is normally caused by with width of a field in the form.  Normally caused by an overflow on the width that causes the height push, I can't completely explain this but the usual solution that I try to give others is to set a specific width on the submit button field (around 27px or more) lower than the whole form's width.

    On your case, you can try lowering the field's width down to somewhere in the 27px and up range versus the whole form's width. (ex: form's width: 850px, then the fields' width should be like 820px"

    Let me know if this works for you.

  • Profile Image
    hypnotic11us
    Answered on April 07, 2011 at 03:15 PM
    You are right again!

    The zoom level in Chrome was 120%. In 100% mode there is no problem.

    I tried to fix it for larger zoom levels as well, but I wasn't able too. I am not sure that I understand the method you suggest. I understand that, if my form has 875px width, the wrapper for the submit button should be 845px or lower. I have tryed doing this by adding custom CSS in the Preferences>Form Styles section, and I added something like this:

    .form-buttons-wrapper {
    margin: 5px !important;
    text-align: center;
    width: 840px;
    }

    Was this what you meant (because this didn't work) or didn't I understand you correctly?

    Thank you!

  • Profile Image
    liyam
    Answered on April 07, 2011 at 03:48 PM

    Actually on straight forward code explanation, I was thinking if you can set every <ul> to have a lower pixel width.

    I tried just now setting each <ul> tag to 600px and the overflowing height did not show up.  Once you zoom in, the width of every <ul> seems to expand, choking the form width that was set and then pushes it to become a height with the same number with the amount of the width.

    Anyway, it"s good to know that it was due to that the browser was zoomed to more than 100%.  Maybe if you can do something to play around with your form and make the width of each <ul> smaller than the form width, I"m sure now that it will be more fluid without ruining the form"s height even when zoomed (you don"t necessarily need to do this, just running at the back of my head).

    -Liyam :)

  • Profile Image
    hypnotic11us
    Answered on April 07, 2011 at 04:20 PM

    Thank you!

    Everything is clear now, I'll try to fix this soon.

    Really appreciate all the help, Liyam! Thanks!

  • Profile Image
    liyam
    Answered on April 08, 2011 at 01:45 AM

    If there's anything else that you wish to inquire, just let us know.

    Thanks :)