javascriptcssfacebookfacebook-fbml

Facebook like CSS styling

I'm using CSS styling to fix the style of the default Facebook fan box.

The problem is that I cannot target the parent post content section (where it says "Reasons for Thyroid Neck Lumps") for "clear:both"

I tried below code:

.-cx-PRIVATE-uiImageBlock__content{
    clear: both;
}

But it only seems to work on my computer as class name changes depending on what computer you are on?

Is there a way to target that div regardless so that it is same "clear: both" for all of the computers/browsers/OS?

Below is the content HTML:

<div class="clearfix"><a class="external -cx-PRIVATE-uiImageBlock__image -cx-PRIVATE-uiImageBlock__largeImage lfloat" aria-hidden="true" href="http://www.thyroid.com.au/blog/reasons-for-thyroid-neck-lumps/?ref=nf" rel="nofollow" target="_blank" data-ft="{&quot;type&quot;:41,&quot;tn&quot;:&quot;E&quot;}" tabindex="-1" onmouseover="LinkshimAsyncLink.swap(this, &quot;http:\/\/www.thyroid.com.au\/blog\/reasons-for-thyroid-neck-lumps\/?ref=nf&quot;);" onclick="LinkshimAsyncLink.referrer_log(this, &quot;http:\/\/www.thyroid.com.au\/blog\/reasons-for-thyroid-neck-lumps\/?ref=nf&quot;, &quot;http:\/\/www.facebook.com\/si\/ajax\/l\/render_linkshim_log\/?u=http\u00253A\u00252F\u00252Fwww.thyroid.com.au\u00252Fblog\u00252Freasons-for-thyroid-neck-lumps\u00252F\u00253Fref\u00253Dnf&amp;h=wAQEaywabAQFjkWBq_12A_eL7rVFG7Tv4gu0VXfElQqzWdA&amp;s=1&quot;);"><img class="img" src="http://platform.ak.fbcdn.net/www/app_full_proxy.php?app=254577506873&amp;v=1&amp;size=z&amp;cksum=6832c1a10fa088b2eb112fe71667be00&amp;src=http%3A%2F%2Fwww.thyroid.com.au%2Fwp-content%2Fuploads%2F2011%2F10%2Fhyperthyroidism.jpg" alt=""></a><div class="-cx-PRIVATE-uiImageBlock__content "><div class="fsm fwn fcg"><div class="uiAttachmentTitle" data-ft="{&quot;type&quot;:11,&quot;tn&quot;:&quot;C&quot;}"><strong><a href="http://www.thyroid.com.au/blog/reasons-for-thyroid-neck-lumps/" target="_blank" onclick="LinkshimAsyncLink.referrer_log(this, &quot;http:\/\/www.thyroid.com.au\/blog\/reasons-for-thyroid-neck-lumps\/&quot;, &quot;http:\/\/www.facebook.com\/si\/ajax\/l\/render_linkshim_log\/?u=http\u00253A\u00252F\u00252Fwww.thyroid.com.au\u00252Fblog\u00252Freasons-for-thyroid-neck-lumps\u00252F&amp;h=aAQHSUMCfAQEtYTi5yinio3ZiIIl7p6PPjwOzidpvNqkbYA&amp;s=1&quot;);" rel="nofollow" onmouseover="LinkshimAsyncLink.swap(this, &quot;http:\/\/www.thyroid.com.au\/blog\/reasons-for-thyroid-neck-lumps\/&quot;);">Reasons for Thyroid Neck Lumps</a></strong> </div><span class="caption" data-ft="{&quot;tn&quot;:&quot;L&quot;}">Thyroid and Parathyroid Gland Surgery Sydney</span><div class="mts uiAttachmentDesc translationEligibleUserAttachmentMessage" data-ft="{&quot;tn&quot;:&quot;M&quot;}">
Reasons for Thyroid Neck Lumps
Many people feel a lump in their neck and they immediately become afraid of the C word that no one ever wants to think about. However, this is not always the cause of a lump in the throat and it will be important to get an ...</div></div></div></div>

It's too big to post all of HTML but this is the part where I am interested.

Facebook Like

Solution

  • if you want to target all div regardless of their name just use it div{ clear: both } and if you want to target an specific div that its name may be changed, you can use xpath to address that specific div