I am using Zilla Shortcode, that opens a popup (thickbox) in wordpress. All the DIVs and other CSS stuff works fine, but if doesn't allow me to use any html tags, for example if I write
this is <b>Bold</b>
this html is ignored, similarly I have tested, strong, italic etc none of the html tags work in it, I have pent almost 3 hours but cant figure it out, what is making this behavior happened and where should I make that change...
this question is only for wordpress developers as they might have come across this problem..
regards
Please ignore this question, as it had nothing to do with thickbox or jquery, there was a fix * set to !important :( hence it was ignore anything I was doing even fontawesome were ignored..
Related
I did make a stupid mistake where I placed a style tag in the body to make it really clear what part of the page it styled.
My question is: can I let it be like that or is it really important to move it to the head, to ensure that most major browsers will display the page properly?
I know that it's supposed to go into the head, but we're talking about a 100 files and if most major browsers supports this, I estimates that it wouldn't be worth it.
Yes, it is supported.
However it is a best practice to not to use directly inside of the HTML tags, use CSS files instead:
https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps
If you have a lot of similar elements, where you want to use the same styles, you should use a separate CSS files and use class/id tags inside of your HTML, and call it in the HTML file.
Check out some advice from mozilla development:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing
It will work but it's not best practice. Ideally if you want to include inline styling / non render blocking CSS, try to include the tag just before the closing head tag.
EDIT: Self-Answered. JSoup does indeed find all image tags.
I'm trying to scrape something off https://www.flickr.com/explore and I ran into a problem.
In the source code, the main images on that website are written in red font, and they don't get found by my JSoup select method (or with the getElementsByTag method). It would be much easier if you guys went to the website and checked the source code yourself because of formatting issues but I'll try to include the bare minimum here.
EDIT: I just tried viewing the source code through chrome and IE, and the image tags are not red, so I'm assuming it's firefox formatting. But the question remains, JSoup doesn't see those image tags. (Second edit at the end of the post)
EDIT 3: Removed my pasted code to put this print screen in: http://i.imgur.com/o8fNPnZ.png
Notice how the red blocks are the main user uploaded images (that I want), and you can see other img tags that are not red (but those are only things like tiny logos). When I run the code
Elements imageElements = doc.select("img");
and then print it, I get all the tags that are not red.
I'm not very experienced with HTML or CSS, is there something specific that I don't know? Or is it something in my code? Is there a way to retrieve the "red" font images as well?
EDIT 2: OK so I narrowed it down to red HTML font in firefox being an error of some kind. If I hover over it, it says: No space between attributes.
Now I'm a little more confused since flickr is a huge website and it obviously still works since I see the images. Can this be some sort of "anti-scraping" thing they have going on? Is there still a way for me to download the images?
Answering my own question.
I was mistaken, JSoup does indeed find ALL the img tags. I'm not 100% sure where my mistake was since I saw it yesterday and have changed my code since then, but I'm assuming it was my misuse of .select which would exclude those images (my code in this question was simplified for argument's sake).
I'll leave this question up because it might help someone else running into errored HTML in source code since there are a few helpful tips in the comments
I'm redesigning a web site that has a bunch of tags in the content pasted in from Word. I would like to get rid of every instance of a font tag.
I would also like to get rid of all the inline style usually put in with
<span style="font-family:Verdana, etc.;">...</span>
I want to keep all the a, em, br, strong tags, so I don't want to strip all tags just the ones that effect the stylings of the content.
This content is all in a MySQL database and a MySQL solution is preferred over a PHP solution, but I will take either at this point.
Maybe it's not the best solution to the problem but here is what I'm doing. I tried some different scripts to get the info from the database, clean it up and post it back with PHP, but nothing really worked that well. Everything I used messed up the data, more than it helped. GIGO.
I decided on using javascript (jQuery) to take all the attributes out of <font> tags and clear the style attribute of all <span> and <p> tags. Everything looks fine after doing this. All future content will be right going into the system, but all the old content has the ugly code still in the database, which is cleaned up enough to display right on the client side.
You can't parse HTML with RegExp and MySQL is for storing&retrieving data, not filtering it.
Just use http://htmlpurifier.org/ to clean your HTML in PHP.
I got some auto generated HMLT code working. Made sure it is correctly parsed by http://validator.w3.org/, and it is a working HTML4.01 Strict.
Now, when I embed this code in a email and send it to gmail, the result is quite adverse (messes up the formatting).
The code is quite long, and apparently only happens when it has such size. This tells me two things:
not worth putting a code snippet here
it is probably some conflicting tag, but still considered valid the parser
Would you guys know of any tool even more strict to validate my HTML? Maybe even something specific for gmail?
Or maybe, just some pro tip on what usually screws the code for gmail.
ps.: the code, although is long, is also quite simple, only a few tables and styles - I took some care in making sure used only "email friendly" tags and formats.
Did you say styles? Oh, boy! Email clients are all doing things differently and even if you get it working for GMail, it may not work for Yahoo.
You may want to look at something like Email CSS guide to start, but really you also want to use some of the Inbox Analysis services (e.g. Inbox Inspector from MailChimp) to get a better picture.
I haven't done this myself (yet), but I have seen mentioned over and over that this is one area you can lose your hair over.
You have to code like its 1999 and not worry about being so tied to conformity to HTML.
Unfortunately valid HTML just doesn't work for some (most) email clients. Even Gmail will strip or ignore things probably for security reasons. The best bet for an email is basically HTML 3. Some inline styles for fonts. I know that <p> tags break in Gmail, and in general colspan and rowspan won't work as intended and you have to use nested tables. Those are just a few things I can think of off the top of my head.
All the answers here helped, but the actual problem was elsewhere.
The problem was In the HTML as I thought, but not exactly in my HTML.
Turns out the the email client will wrap lines too big before handling it to render, regardless if it is HTML code or whatever, more exactly, breaking tags in the middle - that explain why it was happening only when the report reached a certain length.
What tipped me that was when I looked at the code generated by MailChimp (suggested by Alexandre Rafalovitch) and noticed it was formatted as quoted-printable, cropped at exactly 75chars for every line.
After that was easy enough to do the same in my own code generator. Well, actually, I didn't even format as quoted-printable, only made sure it would wrap too long lines by itself.
Apart from that, for all I can tell, a HTML 4.01 Strict code will work pretty much fine in a Gmail client.
Hope it helps post-1999 generations.
cheers.
I have built a custom context menu but have found annoyingly that when I right click on my site in firefox text and images just seem to randomly get selected.
The link below is a basic html dump of the page that is having issues. You can see that when you right click it in Firefox, certain elements are highlighted. Very annoying! This must be a purely html markup problem in Firefox as there is absolutely no CSS or JS on this page.
Example Here:
http://pastehtml.com/view/1e16jup.html
Love to hear your thoughts/suggestions...
There are a lot of errors in this page have a look at the validator result here.
Maybe it gives firefox a lot of problem rendering the page properly.
Close all the <meta> and <img> tags, <script> must have proper type attributes, tags like <h1> shouldn't be placed inside of <a>, <p> neither.
I'm assuming you mean the HTML5 contextMenu? Because this is not implented in any browser.
A bit of quick investigation seems to demonstrate that the header+footer elements have this behaviour. Also, lists appear to have it as well. This is because those elements have a certain semantic use and this behaviour seems consistent with those semantic uses. Check out the specification to see how these elements are intended to be used.
I'm firing blind but I'd suspect you can override this with -moz-user-select - but this is going contrary to the Firefox user experience. I wouldn't recommend it at all.