Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Excerpts, Read more, Pagination (http://forum.bytesforall.com/forumdisplay.php?f=20)
-   -   Strange behavior... (http://forum.bytesforall.com/showthread.php?t=15960)

JulesG Nov 14, 2011 08:06 AM

Strange behavior...
 
Writing posts has worked fine and without problems so far until now...

Wordpress 3.2.1 Atahualpa 3.7.1
Blog URL: http://julesgobeil.com/wpfr/

I have problems with a short post with that includes a bulletted list. The problem post is the second one. This post shows up perfectly when viewed as a complete post:

http://julesgobeil.com/private/post-pict3.jpg

However, the excerpt is all screwed up:

http://julesgobeil.com/private/post-pict2.jpg

The bulletted list is shown in a single line and the post is followed by the popup text for each of the icons in the "Share and Follow" Plugin that is shown in the footer of the post. Disabling the plugin does not solve the problem, it just removes the text from the plugin and the bulletted list is still shown as a single line.

I use TinyMCE Advanced as post editor but the problem remains the same if I use CKEditor for WordPress.

http://julesgobeil.com/private/post-pict1.jpg

This is the generated HTML for the post:
HTML Code:

<table style="background-color: #eeeae1; width: 675px;" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td style="width: 200px; background-color: #eeeae1;" rowspan="3" valign="top"><img src="http://julesgobeil.com/wpfr/wp-content/mes-images/110813am190k2f.jpg" alt="Grand duc d'Amérique" width="200" height="248" /></td>
<td style="background-color: #eeeae1;" rowspan="3" align="left" valign="top"><strong><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Canards barboteurs</span></strong>
<ul>
        <li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Canard colvert</span></li>
        <li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Canard noir</span></li>
        <li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Canard souchet</span></li>
        <li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Canard pilet</span></li>
        <li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Canard d'amérique</span></li>
        <li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Sarcelle d'hiver</span></li>
        <li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Sarcelle à ailes bleues</span></li>
</ul>
<p style="text-align: center;"><span style="font-family: arial,helvetica,sans-serif; font-size: medium;"><a href="http://www.julesgobeil.com/site_web_3/sw3_fr/galleries/2-oiseaux/oiseaux-3/">
Lien vers les photos</a></span></p>
</td>
</tr>
</tbody>
</table>

I tried not using a bulletted list:

This:
- Canard colvert
- Canard noir
---

And this:
Canard colvert
Canard noir
...

still cause the same problem.

I also tried to include this tag: <ul> in Posts & Pages / Configure Excerpts / Don't strip these tags and it doesn't work either.

I use Firefox, but same problem in IE and Safari.

This is a major problem for me because I have about 30 posts like this one to include in my blog. Can you help ???

Jules

juggledad Nov 14, 2011 08:23 AM

Try adding a <li> or it will be stripped too

JulesG Nov 14, 2011 08:59 AM

Hey, half of the problem is partly solved. I now get a complete bulletted list. However, it is not indented as it should and the bullets are touching the picture. Also, I still get the popup text from the "Share And Follow" plugin icons.

See here: http://julesgobeil.com/wpfr/

juggledad Nov 14, 2011 10:18 AM

when you display a multi post page and the post is displayed as an excerpt, wordpress by default strips ALL HTML from the post. Atahualpa follows this example but allows you to tell it not to strip some HTML. In this case, it is still stripping some html. You need to look at the post full post and determine what HTML not to strip.

Here is the post in the excerpt
HTML Code:

<div class="post-96 post type-post status-publish format-standard hentry category-oiseaux tag-canard-barboteur tag-canard-chipeau tag-canard-colvert tag-canard-damerique tag-canard-noir tag-canard-souchet tag-sarcelle-a-ailes-bleues tag-sarcelle-dhiver even" id="post-96">
                                                <div class="post-headline"><h2>                                <a href="http://julesgobeil.com/wpfr/?p=96" rel="bookmark" title="Permanent Link to Canards barboteurs">
                                Canards barboteurs</a></h2></div>                <div class="post-byline">Par Jules Gobeil, &nbsp;&nbsp; Lundi le 14 novembre 2011</div>                <div class="post-bodycopy clearfix">                <a href="http://julesgobeil.com/wpfr/?p=96"> <img width="120" height="150" src="http://julesgobeil.com/wpfr/wp-content/uploads/2011/11/110813am190k2f-120x150.jpg" class="attachment-post-thumbnail wp-post-image" alt="Grand duc d'Amérique (J)" title="Grand duc d'Amérique (J)" /></a>
                                <p> Canards barboteurs</p>
<ul>
<li>Canard colvert</li>
<li>Canard noir</li>
<li>Canard souchet</li>
<li>Canard pilet</li>
<li>Canard d’amérique</li>
<li>Sarcelle d’hiver</li>
<li>Sarcelle à ailes bleues</li>
</ul>
<p style="text-align: center;"> Lien vers les photos</p>
<ul class="socialwrap row">
<li class="iconOnly share">Partagez cet article:</li>
<li class="iconOnly"> Recommandez sur Facebook </li>
<li class="iconOnly"> Partagez sur Linkedin</li>
<li class="iconOnly"> Tweet au sujet de cet article</li>
<li class="iconOnly"> Abonnez-vous aux commentaires <span style="color:#595959"> . . .
<p> &nbsp;&nbsp;&nbsp;<a href="http://julesgobeil.com/wpfr/?p=96">. . . Continuez la lecture</a></span></p>
</div>                                <div class="post-footer"><img src="http://julesgobeil.com/wpfr/wp-content/themes/atahualpa/images/icons/comment20.gif" alt="" /> <a href="http://julesgobeil.com/wpfr/?p=96#respond" class="comments-link"  title="Commentaire sur Canards barboteurs">Rédigez un commentaire</a> &nbsp;&nbsp; <img src="http://julesgobeil.com/wpfr/wp-content/themes/atahualpa/images/icons/folder20.gif" alt="" /> <a href="http://julesgobeil.com/wpfr/?cat=23" title="Voir tous les articles dans Oiseaux" rel="category">Oiseaux</a> &nbsp;&nbsp; <img src="http://julesgobeil.com/wpfr/wp-content/themes/atahualpa/images/icons/pencil20.gif" alt="" /> </div>                </div><!-- / Post -->       

and here its is as a full post
HTML Code:

<div class="clearfix navigation-top">
                <div class="older-home"> &nbsp;</div><div class="home"><a href="http://julesgobeil.com/wpfr/">Aperçus</a></div><div class="newer-home">&nbsp;  <strong>Article suivant </strong>  &raquo;</div></div>                                <div class="post-96 post type-post status-publish format-standard hentry category-oiseaux tag-canard-barboteur tag-canard-chipeau tag-canard-colvert tag-canard-damerique tag-canard-noir tag-canard-souchet tag-sarcelle-a-ailes-bleues tag-sarcelle-dhiver odd" id="post-96">
                                                <div class="post-headline"><h1>Canards barboteurs</h1></div>                <div class="post-byline">Par Jules Gobeil, &nbsp;&nbsp; Lundi le 14 novembre 2011</div>                <div class="post-bodycopy clearfix"><table style="background-color: #eeeae1; width: 675px;" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td style="width: 200px; background-color: #eeeae1;" rowspan="3" valign="top"><img src="http://julesgobeil.com/wpfr/wp-content/mes-images/110813am190k2f.jpg" alt="Grand duc d'Amérique" width="200" height="248" /></td>
<td style="background-color: #eeeae1;" rowspan="3" align="left" valign="top"><strong><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Canards barboteurs</span></strong></p>
<ul>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Canard colvert</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Canard noir</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Canard souchet</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Canard pilet</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Canard d’amérique</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Sarcelle d’hiver</span></li>
<li><span style="font-family: arial,helvetica,sans-serif; font-size: medium;">Sarcelle à ailes bleues</span></li>
</ul>
<p style="text-align: center;"><span style="font-family: arial,helvetica,sans-serif; font-size: medium;"><a href="http://www.julesgobeil.com/site_web_3/sw3_fr/galleries/2-oiseaux/oiseaux-3/"><br />
Lien vers les photos</a></span></p>
</td>
</tr>
</tbody>
</table>
<div class='shareinpost'><ul class="socialwrap row"><li class="iconOnly share">Partagez cet article:</li><li class="iconOnly"><a rel="nofollow" target="_blank" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fjulesgobeil.com%2Fwpfr%2F%3Fp%3D96&amp;t=Canards+barboteurs" title="Recommandez cet article sur Facebook" ><img src="http://julesgobeil.com/wpfr/wp-content/plugins/share-and-follow/images/blank.gif" height="32" style="background: transparent url(http://julesgobeil.com/wpfr/wp-content/plugins/share-and-follow/default/32/sprite-32.png) no-repeat;padding:0;margin:0;height:32px;width:32px;background-position:-363px 0px" class="image-32" width="32" alt="facebook"/> <span class="head">Recommandez sur Facebook </span></a></li><li class="iconOnly"><a rel="nofollow" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fjulesgobeil.com%2Fwpfr%2F%3Fp%3D96&amp;title=Canards+barboteurs&amp;&amp;summary=%0D%0A%0D%0A%0D%0A%0D%0ACanards+barboteurs%0D%0A%0D%0A%09Canard+colvert%0D%0A%09Canard+noir%0D%0A%09Canard+souchet%0D%0A%09Canard+pilet%0D%0A%09Canard+d%27am%C3%A9rique%0D%0A%09Sarcelle+d%27hiver%0D%0A%09Sarcelle+%C3%A0+ailes+bleues%0D%0A%0D%0A%0D%0ALien+vers+les+photos%0D%0A%0D%0A%0D%0A%0D%0A" title="Partagez cet article sur Linkedin" ><img src="http://julesgobeil.com/wpfr/wp-content/plugins/share-and-follow/images/blank.gif" height="32" style="background: transparent url(http://julesgobeil.com/wpfr/wp-content/plugins/share-and-follow/default/32/sprite-32.png) no-repeat;padding:0;margin:0;height:32px;width:32px;background-position:-891px 0px" class="image-32" width="32" alt="linkedin"/> <span class="head">Partagez sur  Linkedin</span></a></li><li class="iconOnly"><a rel="nofollow" target="_blank" href="http://twitter.com/home/?status=http%3A%2F%2Fjulesgobeil.com%2Fwpfr%2F%3Fp%3D96" title="Tweetez cet article" ><img src="http://julesgobeil.com/wpfr/wp-content/plugins/share-and-follow/images/blank.gif" height="32" style="background: transparent url(http://julesgobeil.com/wpfr/wp-content/plugins/share-and-follow/default/32/sprite-32.png) no-repeat;padding:0;margin:0;height:32px;width:32px;background-position:-1749px 0px" class="image-32"  width="32"  alt="twitter"/> <span class="head">Tweet au sujet de cet article</span></a></li><li class="iconOnly"><a rel="_self" href="http://julesgobeil.com/wpfr/?p=96&feed=rss2" title="Suivez les commentaires de cet article via RSS"><img src="http://julesgobeil.com/wpfr/wp-content/plugins/share-and-follow/images/blank.gif" height="32"  width="32" style="background: transparent url(http://julesgobeil.com/wpfr/wp-content/plugins/share-and-follow/default/32/sprite-32.png) no-repeat;padding:0;margin:0;height:32px;width:32px;background-position:-1452px 0px" class="image-32"  alt="rss" /> <span class="head">Abonnez-vous aux commentaires de cet article</span></a></li><li class="iconOnly"><a rel="nofollow" target="_self" href="javascript:window.bookMark('http%3A%2F%2Fjulesgobeil.com%2Fwpfr%2F%3Fp%3D96', 'Canards+barboteurs', BrowserDetect.browser);" title="Ajoutez à vos marque-pages" ><img src="http://julesgobeil.com/wpfr/wp-content/plugins/share-and-follow/images/blank.gif" height="32" style="background: transparent url(http://julesgobeil.com/wpfr/wp-content/plugins/share-and-follow/default/32/sprite-32.png) no-repeat;padding:0;margin:0;height:32px;width:32px;background-position:-99px 0px" class="image-32" width="32" alt="bookmark"/> <span class="head">Marquez cette page dans votre fureteur</span></a></li><li class="iconOnly"><a rel="_self" href="mailto:?subject=Blogue%20de%20Jules%20Gobeil%20:%20Canards%20barboteurs&amp;body=Ci-joint%20le%20lien%20vers%20un%20article%20intéressant:%20%20http://julesgobeil.com/wpfr/?p=96" title="Envoyez le lien par courriel"><img src="http://julesgobeil.com/wpfr/wp-content/plugins/share-and-follow/images/blank.gif" height="32"  width="32" style="background: transparent url(http://julesgobeil.com/wpfr/wp-content/plugins/share-and-follow/default/32/sprite-32.png) no-repeat;padding:0;margin:0;height:32px;width:32px;background-position:-330px 0px" class="image-32"  alt="email" /> <span class="head">Envoyez à un ami</span></a></li></ul><div class="clean"></div> </div></div>                                <div class="post-footer"><img src="http://julesgobeil.com/wpfr/wp-content/themes/atahualpa/images/icons/folder20.gif" alt="" /> <a href="http://julesgobeil.com/wpfr/?cat=23" title="Voir tous les articles dans Oiseaux" rel="category">Oiseaux</a>  &nbsp; <img src="http://julesgobeil.com/wpfr/wp-content/themes/atahualpa/images/icons/pencil20.gif" alt="" /> </div>                </div><!-- / Post -->       

notice the difference

I would add <span> to what you don't want stripped and possible <table> <td> <tr> <tbody>...

JulesG Nov 15, 2011 09:43 AM

Thanks a lot for your help. Knowing that HTML code is disabled in the excerpts makes it easier to find a solution.

I tried the tags you suggest and a few others. It does indeed allow some formatting but it causes other problems. I'm afraid that trying to introduce formatting is not a viable solution.

The best I can do to stay in control is to design this post without formatting. It's not as nice but it does the job.

See the second post here: http://julesgobeil.com/wpfr

Here is the HTML code for the post. Note that I had to include words with same color as the background to avoid showing the popup text from the "Share & Follow" plugin; these show up if the post has less words than what is specified in "Excerpt length".

HTML Code:

<table style="width: 650px; background-color: #eeeae1;" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>

<td style="width: 200px; background-color: #eeeae1;" align="center" valign="top"><img src="/wpfr/wp-content/mes-images/tbn_oiseaux-3.jpg" alt="Sarcelle d'hiver" width="165" height="110" /></td>

<td style="background-color: #eeeae1;" align="left" valign="top"><span style="font-family: arial,helvetica,sans-serif; font-size: medium; color: #000033;">Canard chipeau  •  Canard colvert  •  canard noir  •  canard pilet  •  canard souchet  •  sarcelle d'hiver  •  sarcelle à ailes bleues</span>

<p style="text-align: center;"><span style="color: #eeeae1; font-size: xx-small;">abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc</span>

<span style="color: #000033; font-family: arial,helvetica,sans-serif; font-size: medium;"><a href="http://julesgobeil.com/site_web_3/sw3_fr/galleries/2-oiseaux/oiseaux-3/"><span style="color: #000033;"> Lien vers les photos</span></a></span></p>

</td>
</tr>
</tbody>
</table>

Best regards
Jules

juggledad Nov 15, 2011 09:56 AM

in a case like this, I'd suggest using the posts 'manual' excerpt. You can put html in that and it will be used before the Atahualpa automatic excerpt.

JulesG Nov 15, 2011 11:04 AM

Quote:

Originally Posted by juggledad (Post 75801)
in a case like this, I'd suggest using the posts 'manual' excerpt. You can put html in that and it will be used before the Atahualpa automatic excerpt.

Humm... I wasn't aware of manual excepts... I guess I still have a lot to learn. Your help is invaluable.

It works fine - I have set a text only excerpt and a bulletted list for the post. Great !

I don't seem to be able to use HTML. How can implement this ?

flyboy Oct 23, 2012 10:58 PM

I had the same thing a number of times. I prefer to solve this using a simple css trick I add into the CSS inserts area:

Code:

/* Preventing images from overlapping bulleted lists */
td#middle ul {
overflow: hidden;
}

I got a 25+ page cheat sheet with all kinds of Atahualpa mods and fixes (mostly CSS). I suggest starting one, it'll save you a ton of time in the future


All times are GMT -6. The time now is 10:54 PM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.