I am developing an interactive electronics lesson plan builder for teachers. I am testing everything is JSbin before sending it on my college's WordPress page.
I have a bunch of images with the align="left" attribute. This works perfectly in JSbin but on WordPress they appear diagonally descending. This can be seen in the live RIT page in the third box (out of 4). Is this a known bug in WordPress or am I doing something wrong when copping the code over?
Code block giving me trouble:
<p>Select Parts:</p>
<div id="bin3">
<img id="drag1" src="http://i.imgur.com/KliLtQ6.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag3" src="http://i.imgur.com/uGvqbbK.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag6" src="http://i.imgur.com/7Q6ym4O.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag8" src="http://i.imgur.com/dywyFeu.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag12" src="http://i.imgur.com/v76St3j.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag14" src="http://i.imgur.com/vO6a0ae.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag15" src="http://i.imgur.com/50c1YvW.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag16" src="http://i.imgur.com/BHn8uyJ.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="RED1" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="RED2" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="GREEN1" src="http://i.imgur.com/nFzIajN.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="GREEN2" src="http://i.imgur.com/nFzIajN.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="BLUE1" src="http://i.imgur.com/dYNAatC.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="BLUE2" src="http://i.imgur.com/dYNAatC.png" draggable="true" ondragstart="drag(event)" align="left">
<div id="RedLine"></div>
<div id="GreenLine"></div>
<div id="BlueLine"></div>
</div>
Thank you for any and all help on this project!
I think the answers so far is good and all, but I also think you need to realize the root of the problem. Which is the default behavior in wordpress of injecting p-tags and br-tags in your content instead of empty lines and after images and such. I'd rather call it a feature and not a bug. Like it or not.
For normal blog-content it's usually not so bad. It probably improves the life for the normal WP-user who knows nothing about HTML or the sorts. But sure, it's admittedly annoying when you don't want those tags there.
You can filter the content. Removes p/br tags but this pretty much changes the default behaviour of wordpress:
There are plugins as well:
Personally I'm not a fan of adding a plugin for every little thing. I'd probably go with a custom page template (your page looks customized enough) so for that specific page you use a separate html(php)-file:
I'm sure there are other workarounds as well.