[Resolved] Spacing Issue in Right Sidebar

[Daniel Boring]

Hi Tom!!

I have poked around everything trying to figure out how in the world I did this. The spacing in the right sidebar is not right, not sure if I messed something up in the theme or otherwise. Any direction is greatly appreciated!!

Issue highlighted in yellow

[John]

Hi Tom/Daniel,

I’m not having the same issue as Daniel with his images running outside the sidebar frame however my issue that I’ve been scratching my head over is in the same ball park.

Thanks,

John

[Jamal]

Hi Daniel,

I think your inline styling(hope thats the correct term) is causing the problem.

<style type="text/css">
div.bsap_1304275{width:100%;display:block;}div.bsap_1304275 a{width:125px;}div.bsap_1304275 a img{padding:0;}div.bsap_1304275 a em{font-style:normal;}div.bsap_1304275 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;float:left;}
div.bsap_1304275 img{border:0;clear:right;}
div.bsap_1304275 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}
div.bsap_1304275 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
div.bsap_1304275 iframe{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;float:left;}div.bsap_1304275 a{line-height:100%;}div.bsap_1304275 a.adhere{width:125px;height:125px;line-height:1000%;}html>body div.bsap_1304275 a.adhere{width:123px;height:123px;}div.bsap_1304275 img.s{height:0;width:0;}
</style>

Removing this code results in this image so im sure you can make better sense of that code and see why its not working. You also have some line-height:1000% in there as well that may need adjusting.

[Jamal]

Hi John,

If i understood you correctly,this is the css you need to adjust to suits your need

.widget ul li {
    padding-bottom: 5px;
    line-height:1.2;
}

I added line-height there as well but im not 100% sure if its right or if is best practice 🙂
This will only apply to the widget areas.

[Tom]

Daniel – Jamal is right, it’s the CSS causing the issue. More specifically, it’s the floating of the images not being cleared.

You can try adding this at the end of your text widget:

<div class="clear"></div>

John – the code Jamal gave you is perfect 🙂

[John]

Thanks guys, worked a treat. I’m picking up bits here and there now. I’ve been using “inspect” to work some things out. Because I didn’t find plain “Widget” near the source I was scratching for other methods – neither the plain use of “ul li”. Another piece of the puzzle.

Thanks for a great template/program.

John

[Daniel Boring]

Adding that code resolved the issue! Thank you Jamal and Tom!!!! You guys rock!!!!!!!!!!!

[Tom]

Happiness all around 🙂

[Author]

Posts