I can go to facebook and get the code for a "like box". Very handy.
Problem is, the display of this box is lame. it's not consistent. The first article in the 'stream' is displayed with this sort of indentation:
The next article in the stream is displayed with different (lame) indentation.
This is in the same likebox, I merely scrolled down.
The effect is not limited to the stream for "Facebook Platform". I've seen it in the Likebox for other streams as well.
I'd like to style the box, to try to make the indentation consistent, but it appears to be rendered as an iframe, which (I think) means I cannot style it because of the S.O.P.
How can I fix this?
Is there a workaround to display a likebox in a div that is not, eventually, an iframe?
EDIT: bug logged: http://developers.facebook.com/bugs/237053466346453
EDIT: I compared the fb:fan control and the likebox control. With the fb:fan thing, it is possible to provide custom CSS to style the contents. (There are some caveats.) I set the width and margins of the text, and also erased the actorName, which is the same for every post. This is the result:
The left side is produced with this code:
<fb:fan profile_id='19292868552' width='292'
connections='0' show_faces='false' stream='true' header='false'
css='http://example.org/fb/customfanbox.css?_=6392'></fb:fan>
The right side is produced with this:
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=false&border_color&stream=true&header=false&height=525"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:292px; height:525px;"
allowTransparency="true">
For the left-hand-side, if you don't want the fb:fan element, you can use an iframe that points to fan.php, like this:
<iframe src='http://www.facebook.com/plugins/fan.php?connections=0&css=http%3A%2F%2Fexample.org%2Ffb%2Ffb%2Fcustomfanbox.css%3F_%3D0292&id=19292868552&locale=en_US&sdk=joey&stream=true&width=292&height=560'
scrolling="no"
frameborder="0"
style="border-bottom:1px grey solid; overflow:hidden; width:292px; height:525px;"
allowTransparency="true">
You could try using the older fan box plugin which offered loading an external CSS file. I don't know if it still works. If so, it could stop working any moment.
You certainly are not the only one with such problems. I suggest you file a feature request / vote for an existing one.
You cannot style pages form other domains.
That would also make XSS possible.
Related
Is it possible to specify ¶mters=whatever type stuff for <iframe> in CSS?
I want to embed multi-track audio from archive.org. So for example, something like this:
<iframe src="https://archive.org/embed/art_of_war_librivox&playlist=1&list_height=200" width="100%" height="200"></iframe>
These bits are easy to do in CSS
.multitrack iframe {
width: 100%;
height: 200px;
}
But what about &playlist=1&list_height=200? Does that have to be done in HTML every time? I want to get it down to just:
<div class="multitrack">
<iframe src="https://archive.org/embed/art_of_war_librivox"></iframe>
</div>
I want to embed it on AO3.org, which is extremely stringent about what we're allowed to use. So please no "use this entirely other tool to solve your problem!" this time. If I can't do it with CSS, I'm pretty sure I can't do it at all.
I don't think there is a CSS based solution to your problem.
Your &playlist=1&list_height=200 is telling the iframed site iself (via GET request) that you want the first playlist and a playlist height of 200px to be rendered.
In the last days we have seen how our newsletters doesn't print as they use to do in Yahoo Mail. Some <td> elements are taking more space that they were supposed to take. After some checking we have seen that width attributes in our inline styles are replaced by min-width.
I was try to see if there were any change in Yahoo Mail but I couldn't find anything. The only thing I have found an issue in github explaining how this behaviour is suppose to happen in Yahoo and in Gmail with the height. I've checked Gmail and it's not happening and everything was ok last week in Yahoo Mail.
Is anyone suffering the same issue? Does anyone know the explanation to that?
This is one of the newsletters suffering the problem, and this is how we see it now.
I answered this question earlier today, here's that answer:
Quick fix, place this in your <style> tag: #media yahoo {min-width:0!important}
This change/bug is brand new at the time of this posting. Yahoo is now changing width to min-width, breaking hybrid layouts among other things. There is a good discussion about other hacks in the Litmus Community.
Table elements for my purpose are parent elements to a button.
For (parent) table elements I placed "!important" next to "min-width" with no spaces.
The html is placed "inline". See the example below:
<table align="center" width="200px" bgcolor="#0076be" style="border-spacing:0;Margin:0 auto;width:95%;max-width:200px; min-width:0%!important;">
Button element has no inline style element of "width".
See example below:
<img src="[[asset_3]]" width="195px" style="border-width:0;max-width: 195px; height:auto;display:block;margin:0 auto;" border="0" alt="Click Show Images to Make Links Work">
Visit Yahoo Mail Update Potentially Breaks Hybrid Emails for more information.
I'm working on a facebook tab that includes an iframe showing content from another website. I've narrowed the iframe down to only showing the part of the website that I want it to and disabled scrolling. In addition to that, I'd like to disable the links in the iframe content, and I've read that it should be possible by adding a transparent .png background image to a div containing the iframe and setting the iframe's z-index to -1, but the iframe is still in front of the image.
So far my css looks like this:
<style type="text/css">
iframe
{
z-index:-1;
}
.bgimg {
background-image: url('transparent.png');
}
</style>
and my html like this:
<div class="bgimg" style="overflow:hidden; width: 700px; height: 100%;margin:auto;">
<iframe src="http://www.url.com/site.html" width="1100" height="700" seamless="seamless" frameborder="0" scrolling="no" style="margin-top:-230px;"></iframe>
</div>
I'm using this to give a direct link to my amateur soccer team's league table, instead of manually having to update the tab each week with all the new information, but I don't want it to be possible to click on each team for team information - just the League table.
I've read several places that this should be possible, but haven't been able to find a functioning code - also read a few places saying it's impossible, and yet some others that say it can only be done using jQuery (which I know nothing about).
If anyone has any alternative solutions to what I'm doing now - please let me know.
Keep in mind that z-index only works for positioned elements (can be relative though.)
See: http://www.w3.org/TR/CSS21/visuren.html#z-index:
Applies to: positioned elements
I am building the following site:
http://www.verbum.xtrweb.com/soon.php
But as you can see, everything is zoomed. Not if you adjust it, but I dont want users to have to adjust their view for my site. I want my site to always appear with the same zoom, as in the picture I uploaded here:
ctrl + 0 is not a solution I am looking for. If not something in the code, probably a style property or something of the kind. See code in your browser to check. Thanks!!
Apart from all the small errors and mistakes found on your page by previous users, I would advise you to wrap your header content into a container with a percantege width. This way it will keep the same width according to the browser window width in all browsers. The font size of your paragraphs should be em also to adjust itself easily. Keeping all this in mind and cleaning up your code, you should be able to deliver the same experience to most of the users
Looks like you made a typing-error. Change the font-size of your paragraphs into px or em. So font-size: 37px (instead of 37pt).
Here, the file did not exist:
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
Maybe you should fix this first.
Also, I don't think it's a good idea to include multiple versions of jQuery on the same page.
Update:
<div id="facebook" style="display: inline; opacity: 1.0999999999999999;">
<input style=" " id="fb-button" type="submit" value=" " onclick="window.location.href='http://www.facebook.com/sharer.php?u=<http://verbum.xtrweb.com/>&t=<Verbum, the new dictionary>'" <="" input="">
</div>
The HTML above (copied from your page) is wrong; the input tag does not close properly.
I need to have the links within my Content Editor Web Part open in the parent frame. The links are a part of the page the iframe is loading. I am editing the Home Page of the SharePoint site and cannot add a tag to the page. Here is my code:
<div style="overflow:hidden; width: 800; height:200; position:absolute; left:-170px; top:0px;">
<iframe src="/News/Pages/Default.aspx#OuterZoneTable" style="overflow:hidden; width:100%; height:550;" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">
</iframe></div>
The widths and heights are different because I am offsetting the page to show a particular location in the page.
Unless I'm missing something about your requirements, wouldn't a TARGET attribute set to _top (or _parent) on your anchors be sufficient?
You'd need to edit the HTML source to accomplish this, so maybe you're asking if there's a way to set that behavior using the Content Editor WYSIWYG controls -- which I don't believe there is.
Another idea would be to use scripting to set the attribute values via the DOM. For example, if you had jQuery in play on your page of links, you could do something like:
$("#OuterZoneTable>a").attr("target","_top");
That example assumes the links you want to change are contained in an element with the HTML id of "OuterZoneTable".