Question

Problem can be seen here.

As you can see in the fiddle, there’s a bit of padding underneath the image in the left column. I’m really not sure how to get rid of this.

The column itself has padding:0 when I inspect the element in Chrome. The div has no padding in it and the image has no margins. Any ideas what this could be? I’ve attempted to manually set the margins/padding and I’ve made both the image and the column display:inline and block just to see what happens.

Ideally, the red background would only show up behind the text. I’ve tried to set the background only in the left column only to have the background stop at the bottom of the text. height:100% didn’t fix that. I’m kind of expecting the bottom of the right column to look longer if I did that anyway.

At this point, I’m a little clueless as to where I can go from here, so would anyone have any ideas what this might be? and whether or not I could change it?

Answer 1

quick & dirty way to find a solution to your problem 🙂

try changing the css rule:

.ui-block-a { margin: 0 0 -5px 0 }