SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    applying the spf lotion V + E + R + T's Avatar
    Join Date
    Apr 2001
    Location
    USA
    Posts
    306
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    iframe overlapping div issue

    Using IE8, on this page, the Facebook comments iframe overlaps the footer div.

    Screenshot:
    ibazALARPip0nN.jpg

    Is there a way to prevent this overlapping?
    Proud SPF member since 2001!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    The styles kept changing as I was looking, but anyhow, there are various ways to stop that, such as unfloating the comments box:

    Code:
    .fbcomments {
      float: left;
      margin-bottom: 30px;
    }
    Or you could set the footer to clear: both. Of force the containers of the comment box to overflow: hidden or place the clearfix style on them. Lots of options. (Putting a height on the container is not a good idea.)

  3. #3
    applying the spf lotion V + E + R + T's Avatar
    Join Date
    Apr 2001
    Location
    USA
    Posts
    306
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried to apply clear:both to the footer and clearfix styles on the comment box, but the comment box still overlaps.

    But if I place the iframe comment box outside of the "dg-content-container" div, then it works without any overlapping (however, this seems like a crude fix as I will need separate margin css fixes for the various browsers).
    Proud SPF member since 2001!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quite a weird issue. I've done multiple things to solve this, however none of it makes sense. I'm posting because are you modifying hte page? Now the comment box isn't appearing for any browser.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Michigan
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can try giving the iframe a class like <iframe class="facebook"...>...</iframe> and then assigning a width and height attribute on your CSS sheet. If you keep the float, apply the clear:both to your footer, or use a clear div (<div class="clear"></div>) right after the iframe that has no attributes other than the clear:both.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •