Background problem in widgets

hi friends

i need your help

plz open this http://uptenlist.com/all/10-fitness-tips-to-be-healthy/ and see widget “recent post” (http://i.imgur.com/W32Vf.png) , “recent post’ background is showing on “search box” widget on top…
suppose i add any new widget above “recent post” , suppose i added “abc” widget” , background will shown on recent post, but “abc” background will disappeared

thanks, hop fully you guys can understand…

I can see that

<div id=“sidebartitlewrapper”>
<h3>Recent Posts</h3>
</div>

Is in it’s own div, where

<div class=“sectioncont”>
<div class=“block-item-small”>
<div class=“block-item-small”>
<div class=“block-item-small”>
</div>

Should sit under it.

It looks like a problem with the template. Perhaps you can not fit enough contnet in your right-hand widget area. I’m sorry I am fairly new to WP and coding.

thanks for your reply, waiting for any other expert :slight_smile:

Hi,

The background on elements following a float will slide up under the float so all your backgrounds end up on the top of the sidebar instead.

Either add clear:both to the element that follows after the float or indeed it looks as though your sidebar doesn’t need to be floated anyway as it is already inside a floated column.


#sidebar{float:none}

thanks sir, its works :slight_smile:

one more question

suppose open this http://uptenlist.com/misc/top-10-best-fathers-day-gifts-in-2012/
you can see social media icons below title, i am using digg digg plugin, is it possible, i can place above and below borders on it?

and i want to push logo little up as well

thanks

Hi,

I’m not sure where you want borders exactly but play around with something like this:


#twfb ul{
border-top:1px solid red;
border-bottom:1px solid red;
padding-bottom:0;
}
#twfb ul li{padding:3px 4px 0}

#twfb ul li img{border:1px solid #000}

The logo can be moved up like so.


#logo {margin-top: -10px}

thanks , logo fixed sir

i am talking about this buttons http://s15.postimage.org/3ocs9uwmz/button.png

let me know, how i can add border on them

Hi,

You can add borders with this:


.dd_post_share{
border-top:2px solid #000;
border-bottom:2px solid #000;
padding:7px 0 0
}

You may be able to tidy the buttons up a little with something like this:


.dd_button + .dd_button + .dd_button{position:relative;top:-2px}
.dd_button + .dd_button + .dd_button + .dd_button{position:relative;top:-4px}
.dd_button + .dd_button + .dd_button + .dd_button  + .dd_button{position:relative;top:-1px}

thanks sir, buttons are not equally divided in spaces, can we adjusted into equal space? http://uptenlist.com/all/10-most-dangerous-cities-in-the-world-in-2012/

Each one has a different width set, so you could adjust those. E.g.

<iframe ... style="width: [COLOR="#FF0000"]107px[/COLOR]; height: 20px; " title="Twitter Tweet Button"></iframe>

If you don;t want to adjust the html as Ralph suggests then you could follow my other code and just apply margins to each element as required.

e.g.


.dd_button + .dd_button{margin-right:20px}/* second button */
.dd_button + .dd_button + .dd_button{margin-right:10px}/* third + button */

and so on…

thanks sir, i applied your 2nd code , can you check it
http://uptenlist.com/health/10-worst-jobs-you-dont-want-to-do/

1 more thing, i visited my site on smart phone, header moved on left side … and site on right side,… can you tell me, whats a problem on it

thanks

I don’t own a smart phone to test but unless you have specifically designed for mobile then it is unlikely that a site like that will display correctly.

On the iphone emulator your js slideshow is sitting on top of the nav so try adding clear:both to the section (section{clear:both}) that follows the nav or at least contain the floated navigation within the header with a containing mechanism.

The page renders fine on my iPhone. Which phone are you using?

sir on samsung gallexy s 2, its displaying incorrect…

can you tell me, where i can paste div clear code?

Sir here is screenshot !

sir i attached screenshot, it can help you better understanding! and sir kindly tell me, where i ve to add “clear both code”

thanks

Hi,

You don’t have a class on the section element to target which is where it is needed so this fix may upset anywhere you have floated a section element - if any.


section{clear:both}

thanks works :slight_smile: