Currently working on a project here http://palanquin.shrimp-works.com. When I try to validate what I have done so far, using http://validator.w3.org/, I get lots of this error Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.), which basically means there is a div which is printing it's styles to the body tag of my document. This is invalid. Simple styles like background color, text color, etc are all being printed in the body tag of the html, ruining any chance of html5 validation.
Is there a wordpress filter that can print all style tags in the wordpress text editor or tinymce to the head instead of to the body? I know how to enqueue inline styles in functions.php. I don't think that's what I need here. Any ideas?
Related
I'm building a simple blog system with PHP, mysqli, jquery, AJAX and CKEditor editor.
When I format my text in the CKEditor (or TinyMCE, doesn't matter) and save it in my database everything is OK. However when I print the text back, surprisingly, my browser won't render the html tags and displays them as plain text!
I have checked and I don't have any kind of CDATA in the page, that might cause the issue.
Here is how it renders:
How it renders
However, when inspecting the issue with FireBug, I noticed a lot of spaces before the tag is being printed! If I just make a small change in the spaces (Remove one or add another), then the browser will render the tags and display the text properly!!
Can you guys help me with this issue? It's really weird.
Am using nicEdit to post content into my database. But I found out that when I post the content, it creates a bunch of tags such as div, p, tags per every paragraph created. This is causing my website to distort when I load the content onto the site.
Why is nicEdit creating all these unwanted div, p tags and is there anyway I can prevent that from happening???
EG.
When I input data eg. "This is a very good website" nicEdit adds tags like <div><p>This is a very good website</p></div> to the text! Which shouldn't be the case.
You're using nicEdit for all the wrong reasons if the end result isn't supposed to be HTML.
We are in the process of importing some old pages from our legacy website which was designed in tables into our new DIV based layout. Our site is built on a PHP include system, so we have our pages split into three components; header, body, and footer. These old pages need to be pulled in for our launch of revision 1.0, and then as we get all of the wrinkles ironed out, we will redesign.
Our header component is working out just fine, and the body content displays as it should, but unfortunately the existing footer element plugs into the bottom of the table. Our footer for the new design extends for 100% of the width, but the existing table only allows for 960px width. Thus our footer is getting cut off.
We are trying to find a dynamic solution, either a using JavaScript, or the jQuery Attr() call to dynamically effect the table dimensions to allow the footer to extend to the edge of the page, yet everything I have tried does not modify the table dimensions or allow overfow to show at all.
Here are a couple of screenshots for you to see what I am talking about.
Div layout:
Table Layout:
If you like to take a peek at the code, you can look at my Demo Page, but just know that this is a demo version which is not using PHP to pull in the components. Its a simple HTML/CSS based layout I have been using to search for alternatives. (I'm not a PHP guy)
We are trying to avoid having to go through hundreds of documents and cutting and pasting the footer in below the table, or having to modify any other code by hand. If we could just include a CSS or JavaScript doc in the header that would render a workaround is the ideal solution.
You can also make a div with the footer Background - separate from the contents and underneath. Put a div with the same css styles as 'footer' after your element. Then you can take the background image (footer_bg.jpg repeat-x) off of footer.
See campdavidozarks.org for a website I made with the same idea.
Center the table, and use the same footer-background on the parent, 100% width element, too with alignment to the bottom and no-repeat on y. Done. Pure CSS solution.
I'm trying to display an HTML email by inserting the entire html code from an email into a div on a webpage.
The problem is that the styles of the email are overriding the overall website styles. So if an email has a red background then my entire site's background color is red.
How do I lock the inner html of the div that has the email html.
You need to address this issue by re-writing or fixing your CSS, otherwise do something like load the HTML email as an iframe and the contents will be isolated from the rest of the page.
Its simply pollution, you mix one set of CSS with another, they mix, and cause problems.
I am building a web app that needs to export a div to an image. That div will contain images, other divs, text with css styling, etc. At the end, the user should have an image that would look the same as if he had taken a screenshot of that div. I 've looked into server-side php libs but I don't see anything that would handle the complexity of the rendered HTML. HTML5 canvas has that capability but I can't use a canvas for my case. Any ideas?
Thanks!
Check out html2canvas. A javascript framework that renders the page content on a canvas element.
You could wrap the div in a canvas tag, access the pixel data directly, send that to a PHP script and use the data to construct an image.
Here's how you get the pixel data
https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas
And here's what you would use to create an image pixel by pixel
http://php.net/manual/en/function.imagesetpixel.php
I've written a project that converts HTML with CSS styles to canvas.
It is available here: https://github.com/coolbloke1324/html-to-canvas
And an example test page is available here: http://www.isogenicengine.com/html-canvas/test/index.html
On the test page, the initial load will just show a square div with some other divs inside it with various stylings like backgrounds and borders including border radius etc. You'll see a button on the top-right of the page marked "Render". Click that and a canvas will be created and then the DOM will be parsed and rendered to the canvas. I intentionally changed the background colour of the canvas to black so you can see the difference.