I am getting random quotes in my HTML (see image below), and I can't for the life of me figure out how to get rid of them. I have traced it right back to my model and there are now quotes there. I have also compressed all my code and there are still quotes.
Any one had this bug???
Here's my PHP code
<ul><?php foreach ($account_media as $value) : ?><li class="span2"></li><?php endforeach; ?></ul>
I am using CodeIgniter
UPDATE: ok this is from a while ago but thought i would update you all with my solution. DO NOT COPY AND PASTE FROM JSFIDDLE really hard to debug (paste code into text editor save as plain text and then delete the old code and replace with plain text version)
Why are you using Inspect Element instead of View Source? What does View Source show?
Quotes might appear as an indication for empty in element inspection. Or in your case, it might show that <li> tags are non-blocks and are separated.
And please, people, read/write it right, I'm so sick of seeing ignitOrs. It's CodeIgnit E r. And I don't point it out just because I'm some correct terminology freak, but because it makes your questions be parsed incorrectly by search engines.
The space between <li> elements is a css issue, refer to this article: Remove Spacing between li
Chrome does this normally. It is nothing to be worried about.
View the source in the future for an absolute rendering of your HTML instead of inspecting the elements.
See screenshot below.
Related
I am using the free plan of the wordpress.com platform to host reference information on a small site. The goal is to be able to copy the code from the site page and place it in your own IDE, such as VSCode. Since the plan is free, all Wordpress features have been cut to a minimum, including the installation of plugins. It is possible to use only standard blocks such as HTML, Code, Classic Editor, etc. When it became necessary to publish highlighted code, I did not find anything better than to copy it from my code editor and convert it to HTML, then insert it into Wordpress standard HTML block. And for the first time everything was fine, i.e. I was able to copy a block of highlighted code from a page on my site and paste it into the VSCode code editor. And the code was displayed in the same way as on the page. But suddenly, everything changed and the following problems arose: the single quotes character (') began to display as an opening single quote (‘) and a closing single quote (’), which makes the code inoperable and needs to be edited, which is extremely inconvenient:
describe(‘Examples for Querying commands’, () => {
before(‘Navigate to querying page’, () => {
cy.visit(‘https://example.cypress.io/commands/querying‘);
});
// Скопируйте интересующий вас пример и вставьте его здесь
});
Double quotes began to display incorrectly on the site itself. Instead of ("), they began to display as (»):
cy.get(‘[data-test-id=»test-example»]’)
What could such a metamorphosis be connected with? It happened after the next resave of the edited page. The single quote character is encoded on the page as &apos replacing it with the symbol (') itself does nothing either. You can watch it here: https://kitchensinkcypress.wordpress.com/%d0%bf%d0%be%d0%b8%d1%81%d0%ba-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%be%d0%b2/. The site is under construction. Please tell me how I can overcome it?
I am not sure if I can treat this as an answer, but it would be an answer if this is Wordpress bug. I found out that the reason of the issue is page update. Steps to reproduce:
Create html snippet for the highlighted code example.
Save it into html file, open the file in browser and ensure that all characters are displayed properly.
Create HTML block on the page and insert there the content of the mentioned html file.
Open the page in browser and insure that the code is displayed properly.
Copy the code snippet from the page and paste it into VSCode editor. Ensure that the code is displayed properly.
Now make any changes anywhere on the web page except of the mentioned HTML block and press Save button.
Expected result: The mentioned code snippet is still displayed properly as no changes were maid inside its HTML block.
Actual result: The snippet has been corrupted. Double quotes (") is turned into (»), single quotes are displayed as opening single quote and closing single quotes if being copied from the page and pasted to VSCode editor:
cy.get(‘[data-test-id=»test-example»]’)
which makes the code not usable. So I believe that this is a Wordpress bug as we have two different results for displaying of the same block of the html code without any user manipulation over this block.
Although Outlook sends e-mails as HTML by default, Microsoft seems to want to make it hard for us to write that HTML ourselves. One important reason for using HTML is to keep the size of an e-mail down when inserting an image by using an <img> tag to access the image from online instead of inserting the image itself in the body of the e-mail.
Several sources [e.g., 1, 2] say that the way to do this is to use "Insert as Text" to insert a file containing the HTML code. But as of Office 2016, the "Insert as Text" option is no longer available by default. Fortunately though, there are also sources [e.g., 3] that show how to get it back.
However, when I tried this, Outlook did not interpret my HTML. So, for example, if I make a file containing the line:
<img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">
and then use "Insert as Text" to insert that line in my e-mail, the result is just that line of code, not the image. What am I doing wrong?
(As indicated by the alt attribute, the image file in that example is just a random online image that appears in one of the articles referenced above. I have no affiliation with that website.)
The answer is very simple. In a way, it's obvious, but in another way, it's not.
The answer is that each segment of HTML code inserted has to be a complete HTML file, including the <!DOCTYPE>, <HTML> and <body> tags, not just the desired HTML code. The reason this is not obvious is because if you insert multiple code segments, each one has to be a complete HTML file, which is something you would never do when actually writing HTML. I presume that what is happening is that when Outlook detects a valid HTML file being "Inserted as Text", it strips the opening and closing <!DOCTYPE>, <HTML> and <body> tags and then inserts the code that was between them -- as HTML, not as text.
So, the solution I found was that instead of the single line of code shown in the question, I need to "Insert as Text" a file containing:
<!DOCTYPE html>
<html>
<body>
<img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">
</body>
</html>
When I insert that as text in my e-mail, I see the image, not the code.
In all the sources I found online that said to use "Insert as Text" to insert HTML in Outlook, none of them said it had to be a complete HTML file instead of just the desired code. So maybe this Q&A will be helpful to someone else, if I'm not the only person who had to scratch my head for a long time before thinking of that.
========================
Added details about using HTML in the e-mail:
As pointed out in the Lenetek article linked in the question, Outlook does not support all HTML tags. In particular, for embedding images, I have found:
When sending from Outlook:
Outlook does not support <figure> and <FigCaption>. I found that an image and caption placed in those tags were rendered inline, just ignoring the tags. For floating to the right margin, I found I was able to get the same results by replacing <figure> with <table> and then placing the image and its caption each inside of <TR><TD>...</TD></TR>.
When receiving in Outlook:
There are differences in how different e-mail clients interpret HTML, which is probably why some e-mails come with a link at the top for viewing the e-mail in one's browser. In particular, I've read that Outlook is not well behaved in this regard. And that was the case with my right-floated image referred to above.
After doing the "Insert as Text" trick, the image appeared correctly at the right margin in the draft e-mail in Outlook, but when it was sent, the CSS style float attribute was ignored and the table appeared by itself at the left margin with no text wrapped around it. I was able to fix this by, in the <table> tag, replacing the style attribute float: right; with the old-fashioned HTML attribute align="right". With that, the image and caption appeared correctly at the right margin when received in Outlook. I have not tested what it looks like in other e-mail clients.
In addition to NewSites answer, I want to point out, that in current Outlook 365 versions the option for "Insert as text" does not appear in the standard settings. The mentioned function under the "attach" tab does NOT offer the "Insert as text" option in the modal window.
For this to work, you will have to add a new tab yourself to the ribbon and add the "Attach" button to this new tab. Once you click this newly added button, you will get a modal with the little dropdown next to the "Insert" button.
I had this same issue and have been so frustrated. It's actually super easy. The trick is to use outlook.live.com. Type any word in the body, highlight it, right click, select "inspect". The code will appear and the word you typed in the body of the email should be highlighted. Right click in the code and select "edit as html." Then, in the code, highlight the word you typed in the body and replace it with your code. Voila! (I learned that here: https://youtu.be/yZOYRhB6ONs)
I had issues displaying the linked image while generating outlook email using HTML code. Somehow it works on a couple of machines, but most didn't show the image.
Kept on researching knowing the problem is with Outlook interpreting the HTML code. And then I reached this thread and the #NewSites answer really nailed it. Just added the line <!DOCTYPE HTML> at the top of my HTML code and all are working perfectly now.
Outlook 365 (2022 Update)
For Outlook 365, the Attach option needs to be enabled manually. Modify the Command Ribbon from inside the message, not the main Outlook window:
Note this option is Attach File without subcommands, i.e. the "classic" Attach File.
From there you can choose Insert as Text as the HTML snippet will show up as processed, not just code.
Outlook version for this post: Microsoft® Outlook® for Microsoft 365 MSO (Version 2202 Build 16.0.14931.20652) 64-bit
I am trying to create a TOC for my Markdown blog.
The methods I am finding here... : Markdown to create pages and table of contents?
....do not work for me because I am naming all of my headers # _</>_ The Setup because I am using CSS on to style the "", giving each header a nice colored Icon next to it. If I simply use ```# The Setup ```` it works great.
This causes issues whenever I try to use [The Setup](#The-Setup).
I tried a few things like [The Setup](#_</>_-The-Setup) and other things, but I can not get it to work.
If someone can point me in the right direction I would greatly appreciate it. Also, if anyone has a better way of adding custom icons next to headers, I think that would be the better way to go about it.
As always, thanks in advance.
The general solution is to examine the rendered HTML output to see what the tool is converting the special characters to, in the HTML's element ID. Every tool could handle the conversion differently (it could convert special characters to -, _, or just remove special characters). Some examples:
<h1 id="_____the-setup">The Setup</h1>
<h1 id="-the-setup">The Setup</h1>
<h1 id="the-setup">The Setup</h1>
Once you have identified the exact id that the tool is using, then you use that value as the heading link in the markdown's table of contents. For example:
[The Setup](#_____the-setup)
Now, the tricky part is that not all Markdown tools will export the rendered HTML, including VS Code. The workaround for VS Code is:
Open the markdown preview mode (which renders to html internally).
Open the VS Code Developer Tools (Help > Toggle Developer Tools).
Use DevTools to inspect the element (in this case, the heading element for "The Setup").
I see that VS Code named the id as the-setup, so in the markdown's table of contents, I write [The Setup](#the-setup). Now the table of content hyperlink works in VS Code. Caveat: it might not work in other Markdown tools if they render a different HTML element ID!
Another shortcut now available in VS Code (1.70 July 2022), is that markdown can autocomplete the header ID. So you just type #, and it will list the valid IDs:
I have an HTML page which needs to display some HTML generated by the user on the Administration area (like a blog, for instance). The problem is that the user sometimes needs to copy-paste tables and other "garbage" content from Word/Excel to the WYSIWYG editor (that has the proper "paste from Word" function). This causes the resulting HTML code to be very dirty.
It wouldn't be a problem unless some of these pages are shown totally wrong: other divs AFTER user's HTML code are not in their supposed position, floats are not respected... etc...
I tried putting a div:
<div style="clear: both;"></div>
without success. I even tried with iFrames, but iFrames accept only external webpages (if applicable...).
The question is: is there any tag or method to put a part of an HTML code inside a webpage discarding all formatting AFTER this code?
Thank you.
To my knowledge, you simply want to end all divs. HTML is a very simple code, with very simple options. Your example doesn't work because HTML isn't that advances. You can either start a function <...> or end a function .
Ideally what you want is a piece of code that puts their work in a separate frame entirely, so as soon as the page passes their code, it goes back to the correct formatting.
Or, you could be really sloppy and put one hundred 's in, just in case.
I am using umbraco 4.7. I have created a razor macro to insert telephone number in my rich text editor. Whenever i add the macro in the RTE, <p> tags are added around the macro automatically. I tried removing the extra <p> tags by editing the html but as soon as I click on save, the <p> tags are added again. I tried installing this package
but it didn't solve my problem. I have tried setting the <TidyEditorContent>False</TidyEditorContent> and checking the forced_root_block : 'p' but none of these could solve the problem.
Any pointers to solve this issue?
This is a common issue, and the RTE causes a number of headaches for maintaining the integrity of your web page. The whole "should we include paragraph tags or not?" question is a difficult one, as it is fine to remove them when only inserting a single paragraph of text, but what if the content editor decides to add more, and you are stripping out the first and last P tags?
Bearing in mind that the CSS for a site will always need to support whatever you choose, the best option is to edit the configuration file to make TinyMCE omit the P tags. To do this, you need to edit the /config/tinyMceConfig.config file. This has two interesting sections at the bottom. contains allowed HTML tags, and the of course contains the opposite.
If you look in the valid elements list of comma separated values, you should see a value #p[id|style|dir|class|align]. Taking note of EXACTLY how this is formatted, you should be able to move it into the invalid elements section. Put it after the default font tag, with a comma preceding it of course.
Restart IIS and try entering your content in the RTE. When you publish, then view the output, you should see that the string in the RTE has had the paragraph tags stripped.
One final option is to strip the paragraph tags from the output. There are many new ways of doing this, but for your Razor version I would use something like:
#Html.Raw(umbraco.library.RemoveFirstParagraphTag(value.ToString()))
This idea is covered in another StackOverflow article.
Good luck, and please let us know if you have any success.
use this jquery .....
$('p').each(function() {
var $this = $(this);
if($this.html().replace(/\s| /g, '').length == 0)
$this.remove();
});