Left side padding in advert using ad_message_body

[CTXMedia]

CSS is not my forte - I'm trying to add some space / padding between the left side of the advert and the quote / message text (as indicated by the yellow marker):



At the moment the advertisement sits on top of the quote - I'd like it to 'push' the quote box over to the left so there's a distinct gap between the two.

Template code I've cobbled together so far is:

<xen:hook name="ad_message_body" />
<xen:if is="{$post.position} % {$xenOptions.messagesPerPage} == 1 AND {$thread.reply_count} > 0 AND !{$visitor.user_id}">
<div style="background: #fafafa; float: right; padding: 10px; border: 1px solid #d7d7d7; border-radius: 6px;">
<div align="center">
<strong>Advertisement</strong>
AD CODE
</div>
</div>
</xen:if>

Any help appreciated.

Thanks,
Shaun

 

[Jake Bunce]

http://xenforo.com/community/thread...dth-based-on-post-position.50731/#post-546073

 

[CTXMedia]

http://xenforo.com/community/thread...dth-based-on-post-position.50731/#post-546073

Thanks Jake, but that didn't have any effect.

Anyone got any other ideas?

 

[Paul B]

Try adding margin-left to the advert CSS.

 

[CTXMedia]

Try adding margin-left to the advert CSS.

Thanks - that seems to work for the body text, but doesn't push the quote container to the left:

 

[Paul B]

Can you post a URL so I can check?

I seem to recall looking into this before for someone else.

It works on my site so it is possible.
I just use this: <div style="min-height: 250px; margin-left: 8px; float: right">

 

[CTXMedia]

Thanks Paul - give this one a try: http://www.cyclechat.net/threads/haro-road-bike.132406/

 

[Paul B]

The reason it works on my site is I have this in EXTRA.css:

.bbCodeQuote {
max-height: 124px;
overflow: auto;
}

That is now an element in Style Properties in 1.2 so setting a max height there along with overflow-auto should resolve it.

Or you can just add overflow-auto and that will keep quotes at their maximum height.

 

[Mike]

It's probably the overflow that triggers it specifically.

 

[CTXMedia]

Perfect - thanks a lot guys.

Added overflow: auto; to the Miscellaneous box for @BBCodeQuote and that's done the trick:

 

[akia]

I've found also adding:

.attachedFiles {
overflow: auto;
}

to extra.css also solves the same problem but with the attached images box.