When I post HTML my tags are rearagned and some content are left out. Why?
-
I am posting HTML in to a blog post. I wounder why some content is removed and some closing tags are added in places where I did not place them.
I have looked for an answer and I cant seam to find a good one. I am only using tags permitted by wordpress. FOr some reason it adds
and changes the structure of my code.
Please get back to me as soon as possible. I will include the code I am trying to add to my blog post:——————————————————-
<article style=”width:220px;position:relative;overflow:hidden;font-family:Arial,sans-serif;font-size:12px;color:#222;background-color:#FFF;box-shadow:0 1px 5px rgba(0,0,0,0.3);”
onmouseover=”document.getElementById(‘share14128’).style.opacity = 1; document.getElementById(‘box14128’).style.opacity=1;” onmouseout=”document.getElementById(‘share14128’).style.opacity = 0; document.getElementById(‘box14128’).style.opacity=0;”><div style=”position:absolute;right:2px;bottom:2px;width:54px;height:23px;background-position:0px -67px;background-image:url(‘https://www.cityblis.com/i/iSpr.png’);z-index:1;”></div>
</article>
—————————————————————-
I hope this helps.
Looking forward to hear from you soon.
//LinusThe blog I need help with is: (visible only to logged in users)
-
I see now when I posted this that the tag wrapping the <img /> and <h2> is missing. It converted it to a link.
-
This is how it looks in my wordpress blog:
http://grinolle.wordpress.com/2013/10/18/test-2/This is how it should look, and looks fine on blogger.com:
http://grinollen.blogspot.com/2013/10/amiazing.html -
a) When you paste link code, it will (naturally) turn into a link. To display code correctly here, you need to enclose it in backticks (see the note on allowed markup).
b) But when you’re referring to the code of a published post, you don’t need to paste any code at all: you can link to the post and we can see its sourcecode.
c) “onmouseover” etc are javascript commands. On wordpress.com we’re not allowed to use javascript, for security reasons. On wordpress.com, the hover items would require different coding plus the Custom Design upgrade. (I can also do it without the upgrade, but it would be quite a pain.) -
Thanks for your answer justpi.
Although when I post some HTML without inline javascript is still rearrange my code and wraps parts of it in a <p> and it totally screws up my styling. Why is this and how can I avoid it? -
You’re welcome.
Your new question is too vague. If you wish, you can paste an example (between backticks) so I can see what’s wrong with it. -
Sorry for my vague explanation.
When I post the code below word press some how changes the whole structure from this:<article class="cbbl" style="width:196px;position:relative;overflow:hidden;font-family:Arial,sans-serif;font-size:12px;color:#222;text-align:center;text-decoration:none;border:1px solid #BBB;background-color:#FFF;box-shadow:0 1px 5px rgba(0,0,0,0.3);"> <a href="https://www.cityblis.com/525/ifat_nesher" target="_blank" style="display:block;text-decoration:none;position:relative;"> <img src="https://www.cityblis.com/user_data/images/logos/thumb/20130508052313_1394_pe6jh9c_196_196_resized.jpg" style="width:100%;display:block;padding:0;border:none;" /> <div style="position:absolute;right:2px;bottom:2px;width:54px;height:23px;background-position:0px -67px;background-image:url('https://www.cityblis.com/i/iSpr.png');z-index:1;"> </div> </a> <h2 style="text-align:center;font-family:Georgia,serif;font-weight:bold;font-style:italic;font-size:14px;color:#222;margin:3px 0;padding:7px;"> <a href="https://www.cityblis.com/525/ifat_nesher" target="_blank" style="text-decoration:none;color:inherit;">Ifat Nesher </a> </h2> </article>To This:
<article style="width:196px;position:relative;overflow:hidden;font-family:Arial, sans-serif;font-size:12px;color:#222;text-align:center;text-decoration:none;border:1px solid #BBB;background-color:#FFF;box-shadow:0 1px 5px rgba(0,0,0,0.3);" class="cbbl"> <p> <a style="display:block;text-decoration:none;position:relative;" target="_parent" href="https://www.cityblis.com/525/ifat_nesher"></a> </p> <a style="display:block;text-decoration:none;position:relative;" target="_parent" href="https://www.cityblis.com/525/ifat_nesher"> <p> <img style="width:100%;display:block;padding:0;border:none;" src="https://www.cityblis.com/user_data/images/logos/thumb/20130508052313_1394_pe6jh9c_196_196_resized.jpg"> </p> <div style="position:absolute;right:2px;bottom:2px;width:54px;height:23px;background-position:0 -67px;background-image:url('//www.cityblis.com/i/iSpr.png');z-index:1;"> </div> </a> <p> <a style="display:block;text-decoration:none;position:relative;" target="_parent" href="https://www.cityblis.com/525/ifat_nesher"> </a> </p> <h2 style="text-align:center;font-family:Georgia, serif;font-weight:bold;font-style:italic;font-size:14px;color:#222;margin:3px 0;padding:7px;"> <p> <a style="text-decoration:none;color:inherit;" target="_parent" href="https://www.cityblis.com/525/ifat_nesher">Ifat Nesher<br> </a> </p> </h2> </article>So to clarify, my question is, why do word press add <p> tags to break up my code? It messes up the whole styling on the post.
-
Where on earth do you copy this stuff from?
Instead of analyzing each mistake or unnecessary complexity, it’s probably easier for me to suggest a more reasonable code after I make sure I’ve grasped what you’re trying to do. You want a linking image with a linking caption, enclosed in a shadowed border, right? What I don’t understand is this:
https://www.cityblis.com/i/iSpr.png
I don’t see if/why/how it fits in the whole picture. -
It is a generic code that you can paste on any page. The reason for the complexity of the inline style is to override the attributes from any stylesheet the target page might have.
Regarding the https://www.cityblis.com/i/iSpr.png That is a common sprite image for this code snippet. Instead of linking to multiple images I have one image that I use and just change the background-position of it on the element I want.
So if I understand you right, wordpress add <p> tags around and inside my code because my inline styling is to complex? That doesn’t sound right to me.
The funny thing is that it looks just like I want it on blogger.com:
http://grinollen.blogspot.com/2013/10/html-test.htmlI removed the inline javascript for this example here on wordpress since you said it was not allowed.
Thanks a lot for your answers Justpi. I appreciate it.
-
So if I understand you right, wordpress add <p> tags around and inside my code because my inline styling is to complex?
That’s not what I said!
A couple of suggestions:
a) Don’t enter paragraph breaks between the opening and the closing tag of a link. Instead of this:<a ETC ETC> WHATEVER </a>write this:
<a ETC ETC>WHATEVER</a>
b) Don’t nest the whole thing inside article tags: use div tags instead. The article tag is supposed to be used in the HTML of the blog, not in the HTML of a post; a complete post (from title to sharing buttons) is an article, an image isn’t. Also, the CSS of a theme may include styling for articles while divs are always unstyled.The reason for the complexity of the inline style is to override the attributes from any stylesheet the target page might have.
Sorry, this is practically futile: you cannot predict every quirk of every theme (especially on newer themes). For example, on Balloons your “citybliss” logo will show lower than you want it, and there will be too much space above and below the caption, because the CSS of the theme specifies a 20px bottom margin for paragraphs and a 35px line height for h2s: the sample you pasted doesn’t take into account either of the two. If you switch to, say, Expound, there will be lots of white space inside the border (so the image won’t be 196px wide), because the CSS of the theme specifies a 40px top, bottom and left padding for article. And so on and so on.
The funny thing is that it looks just like I want it on blogger.com:
Maybe it’s partly due to the theme you happen to use, maybe not. I cannot really tell: I used to blog on Blogspot when I didn’t know anything about HTML and CSS, but I’ve stopped long ago.
-
Hey,
a) I just formatted the code that way in this forum so the readers could easily see the open and closing tags. The code I posted in the blog was very nice, no unnecessary space.
b) I tested to to replace the article tag with a div, but still same result.
I removed all of my inline styling and that seam to prevent wordpress form adding p tags and br:s. Although it did not look anything like I wanted it to.
I can’t see any reason for wordpress to wrap part of my code in p tags and
in some places (i had no line breaks in the code I posted).Does any one know what styling attributes trigger wordpress to add this to posts? I can keep adding an subtracting attributes to my code for hours before I can figure out what works.
Thanks again for your answers justpi.
-
If you’re duplicating content from Blogger here, you may run into an issue. Staff have said that if any site here is just a duplicate of another site, one or the other needs to be set as Private. It’s a ToS issue.
-
Normally what you’re experiencing shouldn’t have anything to do with the style attribute by itself, it should have to do with incorrect nesting. Please paste a problem example again, exactly as you paste it in the editor (without falsifying it “so the readers could easily see the open and closing tags”).
- The topic ‘When I post HTML my tags are rearagned and some content are left out. Why?’ is closed to new replies.
WordPress.com Forums 
