Click here to Skip to main content
15,942,156 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I created this Facebook landing page for one of my clients and the background seems to be holding the overflow pretty badly. I tried many overflow codes but none of them seem to help. When the Facebook comment box is expanded the page goes crazy. What I need is when the "View More..." button in the Facebook comment box is pressed I want the background to expand and have a black background to the expanded section which will merge invisibly with the existing background

or have the overflow of the comment box handled via scrolling. I tried doing that by embedding the comment box in a iframe which didn't produce results.

All codes are attached below.

HTML Code:

HTML
<head>
  [[style.css]]
</head>

<div align=top style="margin-removed 180px;">
  <div align=left style="margin-removed 460px;">
    <font face="Calibri">
  <div id="WFItem349383" class="wf-formTpl">
    <form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html?u=Bmwp"
    method="post">
        <div class="wf-box">
            <div id="WFIheader" class="wf-header el" style="height: 20.1818182468414px; display:  none !important;">
                <div class="actTinyMceElBodyContent">
                    <p style="text-align: center !important;">
                        <span style="font-family: verdana !important; font-size: 14px !important; color: rgb(0, 0, 0) !important;">
                            
                                <span style="line-height: 8px !important; display: inline-block !important;">Silakan Masukkan NAMA & EMAIL Dibawah ini :</span>
                            
                        </span>
                    </p>
                    <p style="text-align: center !important;"></p>
                    <p></p>
                </div>
                </div>
                    </li>
                    <li class="wf-email" rel="undefined" style="display:  block !important;">
                        <div class="wf-contbox">
                            <div class="wf-labelpos">
                                <label class="wf-label">Email:</label>
                            </div>
                            <div class="wf-inputpos">
                                <input type="text" class="wf-input wf-req wf-valid__email" name="email" style="width: 267px"></input>
                            </div>
                            ^__em class="clearfix clearer"__^</em__^
                        </div>
    </li> 
                    <li class="wf-submit" rel="undefined" style="display:  block !important;">
                        <div class="wf-contbox">
                            <div class="wf-inputpos">
                                <!--<input type="submit" class="wf-button" name="submit" value="Saya Mau Tau Rahasianya"
                                style="display:  inline !important; width: 269px !important;">-->
                              <input type="image" src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/USEFULLBUTTONSWHITEfg_zps4213880f.png" class="wf-button" name="submit" style="margin-left: 35px;margin-top: 5px;"> 
                          
                          </input>
                            </div>
                            ^__em class="clearfix clearer"__^
                        </div>
                    </li>
                    <li class="wf-counter" rel="undefined temporary" style="display:  none !important;">
                        <div class="wf-contbox">
                            <div>
                                <span style="padding: 4px 6px 8px 24px; background: removed(https://app.getresponse.com/images/core/webforms/countertemplates.png) 0% 0px no-repeat scroll transparent;"
                                class="wf-counterbox">
                                    <span class="wf-counterboxbg" style="padding: 4px 12px 8px 5px; background: removed(https://app.getresponse.com/images/core/webforms/countertemplates.png) 100% -36px no-repeat scroll transparent;">
                                        <span class="wf-counterbox0" style="padding: 5px 0px;"></span>
                                        <span style="padding: 5px;" name="https://app.getresponse.com/display_subscribers_count.js?campaign_name=planetuang&var=0"
                                        class="wf-counterbox1 wf-counterq">0</span>
                                        <span style="padding: 5px 0px;" class="wf-counterbox2">subscribers</span>
                                    </span>
                                </span>
                            </div>
                        </div>
                        ^__em class="clearfix clearer"__^
                    </li>
                    <li class="wf-captcha" rel="undefined temporary" style="display:  none !important;">
                        <div style="display:  block !important;" wf-captchaerror="Incorrect please try again"
                        wf-captchasound="Enter the numbers you hear:" wf-captchaword="Enter the words above:"
                        class="wf-contbox wf-captcha-1" id="wf-captcha-1"></div>
                        ^__em class="clearfix clearer">
                    </li>
                    <li class="wf-privacy" rel="undefined" style="display:  block !important;">
                        <div class="wf-contbox">
                            <div>
                                <a target="_blank" class="wf-privacy wf-privacyico" href="http://www.getresponse.com/permission-seal?lang=en"
                                style="height: 21px !important; display: inline !important;margin-removed 55px;margin-removed -20px;">We respect your privacy^__em class="clearfix clearer"></a>
                            </div>
                            ^__em class="clearfix clearer">
                        </div>
                    </li>
                    <li class="wf-poweredby" rel="undefined temporary" style="text-align: center; display:  none !important;">
                        <div class="wf-contbox">
                            <div>
                                <span style="display:  none !important;" class="wf-poweredby wf-poweredbyico">
                                    <a target="_blank" style="display:  inline !important; color: inherit !important;"
                                    class="wf-poweredbylink wf-poweredby" href="http://www.getresponse.com/">Email Marketing</a>by GetResponse</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="WFIfooter" class="wf-footer el" style="height: 160px; display:  none !important;">
                <div class="actTinyMceElBodyContent">
                    <p>Copyright by Planetuang.com</p>
                </div>
                ^__em class="clearfix clearer">
            </div>
        </div>
        <input type="hidden" name="webform_id" value="349383" />
    </form>
</div>
<script type="text/javascript" src="http://app.getresponse.com/view_webform.js?wid=349383&mg_param1=1&u=Bmwp"></script>

</font>

  </div>
  </div>

	<div align=top style="margin-removed 120px;">
	<div align=left style="margin-removed 10px;">

		<fb:comments href="http://planetuang.com" numposts="3" colorscheme="dark"></fb:comments>
  	
  	</div>
	</div>

	<div align=top style="margin-removed -390px;">
	<div align=right style="margin-removed 40px;">
      
      <a href="http://www.facebook.com/planetuang" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/Facebooklogo_zpsd9786622.png" width="150px" height="45px" border="0" alt="Facebook" /></a>
      
      <br />
      <br />
      
      <a href="http://www.Twitter.com/planetuang" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/Twitter_logo_png-5_zps654ec1de.png" width="150px" height="45px" border="0" alt="Twitter" /></a>
      
      <br />
      <br />
      
      <a href="http://www.pinterest.com/husanto" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/Pinterest_logo_zps568b5041.png" width="150px" height="45px" border="0" alt="Pinterest" /></a>
      
      <br />
      <br />
      
      <a href="http://www.linkedin.com/in/husanto" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/li_zpsc499f6cf.png" width="150px" height="45px" border="0" alt="LinkedIn" /></a>
      
      <br />
      <br />
      
      <a href="http://www.youtube.com/planetuang" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/youtube-channel-logo_zps9ac07079.png" width="150px" height="45px" border="0" alt="YouTube" /></a>  


CSS Code:

CSS
body {
    background: #000 url("http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/BG1_zpsc13e85e5.png") no-repeat center center fixed;
} 
Posted

1 solution

I edited the height of the background image to be longer and the problem was then fixed. No thank you to everyone who did not help me.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900