At my website I have a single < sign that I want deleted that shows up just before the table and just after the YouTube video.
The thing is, that character does not show up in the index.html file. I have checked it in three editors just to be sure. I have no idea where it is coming from.
If you delete the table in Firefox it disappears, but if you delete the YouTube video it does not. So it has to be linked to the table somehow.
When I look it up as view source selection in Firefox, a small < sign shows up to the left side of the table code. But if you look in the index.html file, there's nothing there.
I'm a quasi-intelligent person who can code a site this good but I cannot for the love of all that is electrical squash this bug. Help would be appreciated and it know it's stupid simple to fix. It has to be. I just don't know what I'm missing at this point.
On line 250, you have:
<<td><img src="images/sample.jpg"></td>
Remove the extra < at the start.
This is part of "Album 2", by the way. Anything outside of proper markup in <table>s tends to get bumped ahead of it.
It's inside the table, here:
<tr>
<td>Album Two</td>
<td>Inter5tellar</td>
<td>A digital song produced in fruity loops for your listening pleasure.</td>
<<td><img src="images/sample.jpg"></td>
<td><img src = "images/button.jpg"></a></td>
<td>$0.99</td>
</tr>
However, since it's not actually inside a td (or th) tag, browsers cannot render it normally. Different browsers might do different things, but it seems that Firefox, at least, in effect "pushes" it out of the table and puts it before it instead.
By the way, you might want to run your page through an HTML validator: it has a number of other errors, including a div inside the head section, duplicate closing tags and some unescaped ampersands in URLs.
Related
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 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.
I'm trying to set up a Like Box in this website: http://filmefilmes.com/breu
The Facebook Page of the site is: http://www.facebook.com/pages/BREU/278537375497440
I have tried all methods. iFrame, FBML, etc.
When you click the "like" button it returns a Error that says the page can't be reached.
When I pass the site on the debugger the error is:
You have < meta> tags ouside of your < head>. This is either because
your < head> was malformed and they fell lower in the parse tree, or
you accidentally put your Open Graph tags in the wrong place. Either
way you need to fix it before the tags are usable.
Which is incorrect because the tags are obviously inside the page's head.
And i get this warning too:
The og:locale property should be explicitly provided, even if a value
can be inferred from other tags.
I have to deliver this website very soon and I've spent some hours trying to correct this and to find solutions in forums etc.
As I have changed methods I believe the error is somewhere in the markup of my page but I don't really have a clue.
Help will be heavily appreciated, thanks.
Having a quick look at the site I can see you DO have <meta> tags outside of the <head> element, these are inside a second <head> tag further down the page.
Check your facetek div.
few of your meta tags are unclosed. ("/>")
thus, closing within them is parser error.
fix it and it should go fine
I've implemented the like button on my WP blog, but for some reason some of them (not all of them) are interpreted as being the same button. If I press like, I will also like the ones that is interpreted as the same. I can't figure out why. There are several other problems with what is shared on Facebook, but I think those problems are connected to this one.
It worked great for a few days, then I started getting an error each time I pressed the like button. After fiddling with the og:type value the error disappeared, but instead now I get this strange behaviour.
My implementation is so simple, I can't really think of any causes:
<div class="fb-like"><fb:like href="<?php the_permalink();?>" show_faces="true" width="600" font="arial"></fb:like></div>
I've found that the behaviour changes depending on what og:type I define in the header section, but with no value producing the correct result.
the blog can be seen at http://blog.parkov.dk/ (in Danish, though).
Anyone has experience with this?
Remove the href parameter and instead use the Open Graph meta tags. I see that you are using them but some required tags are missing:
og:title
og:url
IMPORTANT NOTE:
For the homepage use blog as og:type!
I have an old-style CGI program which generates a large HTML table. Because the table contents are slow to calculate (even though it's not that big) I would like to print it one row at a time, and have the browser display rows as they are fetched.
If you search online you'll see that style="table-layout: fixed" is supposed to help some browsers do this, but on the other hand Firefox can render incrementally even without it. My test browser is Firefox 4.0b10 on Windows but I cannot get it to display incrementally using the simple example below:
<html>
<head>
<title>x</title>
</head>
<body>
<table width="100%" style="table-layout: fixed" rows="4" cols="4">
<col width="10%" />
<col width="20%" />
<col width="30%" />
<col width="40%" />
<tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
<!-- flush output, one second pause... -->
<tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
<!-- flush output, one second pause... -->
<tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
<!-- flush output, one second pause... -->
<tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
<!-- flush output, one second pause... -->
</table>
</body>
</html>
Instead the page is blank until the end of the download, when the whole table appears. I've tried various ways to tell the browser the table dimensions in advance so it should have no problem displaying it as it arrives, but they don't help. (Removing the hints doesn't help either.)
If I modify my CGI script to close and restart the table between each row, with an extra blank paragraph in between, then the page does render incrementally in the browser. This shows that the data is getting to the browser incrementally - just Firefox is choosing not to render it.
Ironically, much more complex scripts producing larger tables seem to do what I want, showing one row at a time as it downloads, but whenever I try to reduce the output to a minimal test case it doesn't work. This leads me to suspect there is some complexity heuristic used by Firefox's rendering engine.
What's the magic dust I need to tell the browser to always display the table as downloaded so far?
For what it is worth.
The Firefox I use Firefox 3.6.16 does not display until the page is downloaded, regardless of what is being downloaded.
You could look for settings in about:config, but I have not seen any solution to this,
there are addins to help with displaying placeholders. but they don't always work either.
Just found this
Read it OR try
about:config - in browse bar
select new
create integer
nglayout.initialpaint.delay
set value to 0
cheers
First of all, I'd say it's seldom good user interface design to load huge amounts of data at once. In most cases, it's better to offer some sort of search or at least paging functionality. There may be exceptions, but people simply cannot process very large quantities of information, and apps serving far more data than people have any use for aren't just wasting cycles, they are badly designed. Imagine if Google displayed the first 10,000 hits by default, or even 1,000. Most users wouldn't even look beyond the first 5 or so, and the amount of wasted bandwidth...
That said, it may of course not be your fault if the page is badly designed. Or it may be, but you'll need a quick fix before coming back to redesign the solution later. :)
One way to make this happen would be to render the table client-side instead of on the server. If there's nothing else heavy on the page, the user would be served quickly with the other content, and the area where the table will appear could contain an animated GIF or similar to indicate the software is "working". You could use an AJAX-call to fetch the data for the table, and modify the DOM in Javascript. You could then create for instance 100 rows at a time and use window.setTimeout to allow the browser to render the updated DOM before continuing.
A good article explaining the event dispatch model may be of help if you choose to go down this path:
http://dev.opera.com/articles/view/timing-and-synchronization-in-javascript/
OK, so how about dropping client-side rendering but fetching and replacing server-side rendered HTML within a placeholder (and thus the table) multiple times? The server-side would have to use a background thread and supply a handle (e.g. a GUID) in it's initial response that an AJAX call could then use to ask for the table. The server could reply with a few rows plus an indication that it's not done, prompting the client to repeat this until finished.
I suppose it would be a little messy, but at least it would allow you to use the same page for your report. A query string parameter could tell the page whether to render completely or emit script to call back to get the data.