I'm creating a custom Facebook tab using IFRAME, but for some odd reason this weird border refuses to go away. I've tried the following:
table, th, td
{
border: 0px;
}
frameborder="0" in the iframe attributes.
and all sorts of CSS attempts. The border just won't go away.
The chrome inspection tool shows the following:
(user agent stylesheet)
table {
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
I have not included that style anywhere in my code. Is there anything I can do to fix this, or is this some kind of Facebook required tab feature? If the border must be there, can I at least have it evenly on all sides?! Hahah.
Refer to this page to see the issue: https://www.facebook.com/hitejinro?sk=app_190322544333196&app_data=visitor_mode
This is what it looks on my end: http://i.imgur.com/HJIUp69.jpg
Thanks for reading.
Border is coming from iframe. Your iframe tag doesn't seem to be well formed. change it to
<iframe src="http://spuxystudios.com/adwell/psy/index.html" width="850" frameborder="0" height="1900px">....</iframe>
Currently it is:
<iframe src="http://spuxystudios.com/adwell/psy/index.html" width="850″ frameborder=" 0" height="1900px"></iframe>
See there is a quote mismatch on width.
Related
I am using iframe on my site. Now I want to make the scroll on the right side of the iframe invisible. I've searched the whole internet but all the codes I've found don't work.
This is my iframe
<iframe src="../pages.php" width="100%" height="650px" class="gitartik"></iframe>
last piece of code I tried
.gitartik{
overflow-y: scroll;
}
.gitartik::-webkit-scrollbar {
width: 0px;
}
``
CSS of the parent frame cannot affect an iframe, you have to include it in the source of the page loaded by the iframe.
JavaScript of the parent frame can add CSS to the page in the iframe, if both pages come from the same origin (which seems to be the case in your example).
To do so First of all remove this part below from the code
.gitartik::-webkit-scrollbar {
width: 0px;
}
Then go to your html and find the iframe for example:
<iframe src="exampleisfake.co.in">
Then edit the iframe tag as shown below:
<iframe src="exampleisfake.co.in" scrolling=no>
add just like shown above:
scrolling=no
I am trying to create a progress update e-mail. I have two main percentage calculations:
Actual Percentage: What is the actual number of completed items, used to fill the progress bar.
Target Percentage: What was the target number of completed items for this time, used to put a vertical line on the progress bar.
I create the html file dynamically from a Scala back-end task. I am copying created html string to a test.html file, see the code:
Style section:
.vl {
border-left: 3px solid black;
height: 15px;
position: relative;
}
Body section:
<table style="border:0;" cellpadding="0" cellspacing="0" width="250">
<tr>
<td style="width:0.0%; background-color:red; float:left; height:15px;"></td>
<td style="width:100.0%; background-color:#cccccc; float:left; height:15px;"><div class="vl" style = "left: 98.75777%"></div></td>
</tr>
</table>
The problem is, when I open the test.html file on a browser (chrome, explorer, edge all the same) I can see my progress bar (sort of) seems correct:
But when I send the e-mail, outlook doesn't show "target percentage":
I've faced the same issue for example with progress tag, it was perfect in browser but not working in the mail so I used td's with percentages. But since this vertical line is completely defined css style by me, I couldn't find a work-around for this one.
I've found which features are not supported on Outlook on this website. For my particular example it was position tags.
I've removed position tags and converted whole structure to a table so I could find a work around for position tags.
I used the following code to embed a google map at www.tastysfreshburgersandfries.com/locations but there are white bars above and below it and I can't seem to figure out how to remove them. Any help with fixing that would be great.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3431.7169822552632!2d-81.45959308200993!3d30.670097134060587!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e4fee54019994b%3A0xbe6be3a817d34edf!2sTasty's+Fresh+Burgers+and+Fries!5e0!3m2!1sen!2sus!4v1476217073308" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
.wpb_content_element { margin-bottom: 35px}, you can play with it and also, .vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner { padding-top: 35px; } that also needs to be changed.
But I would suggest you to create a separate class and apply it instead of messing with existing CSS styles, as I can see its from other framework.
You have padding on the row that has the iframe (it isn't the iframe which generates the white bars). Look this
I can figure you are using Visual Composer. First do a click on the pencil who is in the upper right corner of the row to see the Row Settings.
Then go to Design Options tab, and check what values do you have on the padding section.
I am using Google org chart and it works great on every browser except Chrome. On Chrome I see these extra lines in between the boxes like this:
For all other browsers, the same page shows up as this:
As you can see there are no blue lines in between the nodes. When I look in firebug or chrome dev tools it appears that its:
.google-visualization-orgchart-node
border: 2px solid #b5d9ea;
That is causing the issue because if i change the border to 0px then the issue goes away (but the border on the actual nodes also goes away which is obviously an issue.
Any suggestion for how to render this correctly in Chrome. I don't see this issue happening in the demo link above.
In my case it was Bootstrap 3 with
border-collapse: collapse;
that was the cause. Fixed it with setting
table.google-visualization-orgchart-table {
border-collapse: separate;
}
.google-visualization-orgchart-linenode {
border: 0;
}
Check whether you have any border rule applied for this css class
.google-visualization-orgchart-linenode
I would try Patrick's answer of setting the .google-visualization-orgchart-linenode {border: 0}. If that doesn't work try setting the border-collapse property since its separate by default.
.google-visualization-orgchart-table,
.google-visualization-orgchart-table tr,
.google-visualization-orgchart-table td {
border-collapse: collapse;
}
Although that's weird that its only showing in Chrome for you. Make sure you have your DOCTYPE setup correctly.
Set the nodeClass option on the chart.draw with a color and background-color to override the default color scheme, which solves the problem in Chrome.
Set two css classes:
//css class for default tree node
.default-leaf { color:black; background-color:#DCDCDC; }
// css class for selected tree node
.selected-leaf { color:white; background-color:#191970; }
While initializing the chart set the nodeClass & selectedNodeClass options:
var chart = new google.visualization.OrgChart( document.getElementById('chart_div'));
// setting options - allowHtml (required for visuals to work), css classes for a tree-node & selected-tree-node
var options = { 'allowHtml': true, 'nodeClass': 'default-leaf', 'selectedNodeClass': 'selected-leaf'};
chart.draw(data, options);
This is what I added to stop the random lines from showing up
<style>
table{
border-collapse: separate !important;
}
</style>
We had an incompatibility with normalize.css that caused this same issue for us. Adding the following CSS fixed it:
table.google-visualization-orgchart-table {
border-collapse: inherit;
}
I also added the following to fix the issue:
table {
border-collapse: separate!important;
}
I designed a contentbox for a website and on the desktop it looked good. But now I want to put it on the mobile.
You can see a example with only relevant html+css here http://pastehtml.com/view/bze2phhwn.html
On my smartphone, ive seen that the border-radius breaks(it displays the background color instead of the border color) in the rounded corners for 1-3px and you can see this effect also on the browser if you zoom in a little bit. Its weird, because if you zoom a little bit out and in, you`ll see that this effect isnt always there. So I tought that it isnt my bad html+css.
What might be the problem?
This seems to be a bug. Submitted to Mozilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=758958
Also: https://stackoverflow.com/questions/10774506/border-radius-causes-white-lines-when-applied-to-individual-corners/10774635#10774635
I think this is a bug as well, but I found a fix... err maybe it would be considered a hack. Here is an image of my issue:
http://i909.photobucket.com/albums/ac298/roboyak/missingBorder_zpsbhftdfmd.png
So my story is that I was getting a reset.css style sheet imposed on me from the parent web page. The td element was getting the following style from that css sheet:
table tbody tr td {
border-bottom: 1px solid #ccc;
}
Long ago when I started the project I overrode this style by stating the following rule in my sheet:
table tbody tr td {
border-bottom: none;
}
In trying to solve my problem I noticed that the border-bottom rule was showing up as "medium none" instead of none. I added the following code, and the border was no longer broken.
table tbody tr td {
border-bottom: none none;
}
Essentially this breaks the rule so the border comes back again on all td's which is not what I want, but I think that this may give some insight into what is happening.