Cause of a large gap beneath picture-based widget and how to eliminate it?

  • Resolved SchuminWeb

    (@schuminweb)


    11 years, 3 months ago

    Am having a problem with a large gap that appears beneath photo-oriented widgets, and I don’t know how to eliminate it.

    The problem appears here, in the sidebar:

    https://sandbox.schuminweb.info/journal/

    The problem is beneath the widget marked “Tumblr” (Ultimate Photo Widget plugin), where it shows a very large gap beneath the image. I want the space between the photo widget and the next to it to be the same as all of the other widgets. I know it’s not a problem with this specific widget from testing I’ve done, as it occurs in any photo-based widget. I first noticed the problem when I was testing an Instagram widget (Instapress plugin).

    In my attempts to solve this, I have looked through the CSS using Chrome’s “inspect element” to see if anything is causing the big gap, and found nothing. I also attempted to “counter” the gap by setting the margin to a negative value to basically roll that blank space up, and that made no difference as well.

    I’m starting to run out of ideas for how to fix this problem. Does anyone else have any ideas? Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hey SchuminWeb,
    So your problem is in the code not the styling. I’m not familiar with your site or your theme, but might still be able to help fix it.

    Using Firebug on Firefox I found that the problem is this piece of code:
    <br clear="all">

    Now, a quick-fix for this with some creative CSS would be:
    br[clear="all"]{display:none;}

    Unfortunately, you can’t be too sure how this will effect any other instances of that code. I applied this fix to a user stylesheet and your site looked fine to me, but only you would know if it’s causing more problems.

    Do you know why that code’s there? Did you put it there? (Your Theme looks pretty custom).

    If you’re familiar with CSS you could also try to really narrow it down so that you’re not hiding all cases of that break with something like this:
    #uftp_photo-2_uftp_container + br[clear="all"]{display:none;}
    But it will only remove it whenever there’s an instance of that break (the gap) after an instance of that Tumbler widget (or any element that uses that div id).

    Either way, this solution is more of a band-aid. But hey, it’s quick and if it works, it works, right?

    Thread Starter SchuminWeb

    (@schuminweb)

    So I verified your findings and they checked out. The BR tag was the culprit. I have no idea why it’s there, nor does it exist in my theme. But that doesn’t mean I can’t style it into submission. ??

    My final solution was similar to what you suggested. What I ended up doing was to disable the BR tag entirely for the “left sidebar” div (where the offending tag lives) using CSS. There should never be a manual linefeed in that div, and so I ought to be safe with that.

    Thank you for your help!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Cause of a large gap beneath picture-based widget and how to eliminate it?’ is closed to new replies.