July 1, 201016 yr I am having problems with extra <p> tags being added. Here is the result i am trying to get > http://pbwebdesign-warrington.co.uk/blog/?page_id=23 I want the text surrounded by the red border to be moved UP inline with the thumbshots image so its all one the same line! I have used the borders as a guide. Does anyone know what might be causing this problem? Is it the extra <p> tags around the heading <strong>? I am using css for the styles, and the html editor within wordpress, the code in here is fine, but when view source of the page above the html has got extra <p> tags, more infor below... Here is my CSS #directory { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; text-decoration: none; text-align: justify; color: #805F36; border:1px solid green;} #directory p { clear:both; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; text-decoration: none; text-align: justify; color: #805F36; border:1px solid red;} #directory strong { clear:both; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; text-decoration: none; text-align: justify; color: #805F36; font-weight:bold; border:1px solid blue;} .directory-thumb { float:right; border:1px solid black; margin:0 0 10px 10px; clear:both;} .directory-thumb img{ border: 1px solid #e4e3cc; padding: 4px; background-color: #FFF;} .directory-thumb:hover img{ border: 1px solid #B7B475; padding: 4px; background-color: #FFF;} .directory-thumb:hover{ color: red; /* irrelevant definition to overcome IE bug */} Here is my HTML from within Wordpress text/html editor <div id="directory"> <h2> Search Engine Optimisation</h2> <p><div class="directory-thumb"><a href="http://www.yahoo.co.uk/" target="_blank"> [thumbshot url="http://yahoo.co.uk"]</a></div> <strong>Test Link Yahoo</strong> – <a href="http://www.yahoo.co.uk/" target="_blank"> http://www.yahoo.co.uk</a> This is a test of the home page of Yahoo, this is just an example, text here. Again this makes no sense at all im am just talking rubbish here.</p> <hr /> <a title="Thumbnails Previews by Thumbshots" href="http://www.thumbshots.com" target="_blank">Thumbnails powered by Thumbshots</a> </div> And here is what is outputted when you view the source of the HTML page <div id="directory"> <h2> Search Engine Optimisation</h2> <p> <div class="directory-thumb"> <a href="http://www.yahoo.co.uk/" target="_blank"><br /> <span class="thumbshot"><img class="thumbshot-img" src="http://open.thumbshots.org/image.aspx?url=http://yahoo.co.uk" border="0" /></span></a> </div> <p><strong>Test Link Yahoo</strong> – <a href="http://www.yahoo.co.uk/" target="_blank"> http://www.yahoo.co.uk</a><br /> This is a test of the home page of Yahoo, this is just an example, text here. Again this makes no sense at all im am just talking rubbish here.</p> <hr /> <p><a title="Thumbnails Previews by Thumbshots" href="http://www.thumbshots.com" target="_blank">Thumbnails powered by Thumbshots</a></p> </div> Do you notice the extra <p></p> tags around the <strong> ?? I dont understand why it is adding these extra <p> tags around this when ive not told it to. Ive spent days now trying to figure this out! Hope you can help :-)
July 1, 201016 yr Your code has a div inside the first p tag so the program you are using (? Dreamweaver?) may think that it has to start another p tag. Try not to have divs inside p tags. Try this where the class has been moved to the first p tag:- <p class="directory-thumb"> <!--<div class="directory-thumb">--><a href="http://www.yahoo.co.uk/" target="_blank"><br /> <span class="thumbshot"><img class="thumbshot-img" src="http://open.thumbshots.org/image.aspx?url=http://yahoo.co.uk" border="0" /></span></a><!--</div>--> <!--<p>--><strong>Test Link Yahoo</strong> – <a href="http://www.yahoo.co.uk/" target="_blank"> http://www.yahoo.co.uk</a><br /> This is a test of the home page of Yahoo, this is just an example, text here. Again this makes no sense at all im am just talking rubbish here.</p>
July 1, 201016 yr Author Im using the text/html editor within Wordpress Admin. The code in the Wordpress editor looks like this >> <div id="directory"> <h2> Search Engine Optimisation</h2> <p><div class="directory-thumb"><a href="http://www.yahoo.co.uk/" target="_blank"> [thumbshot url="http://yahoo.co.uk"]</a></div> <strong>Test Link Yahoo</strong> – <a href="http://www.yahoo.co.uk/" target="_blank"> http://www.yahoo.co.uk</a> This is a test of the home page of Yahoo, this is just an example, text here. Again this makes no sense at all im am just talking rubbish here.</p> <hr /> <a title="Thumbnails Previews by Thumbshots" href="http://www.thumbshots.com" target="_blank">Thumbnails powered by Thumbshots</a> </div> When i save this and then refresh the html page then view its page source, for some reason it automatically adds the <p></p> tags around the <strong> tags. When i have not specified this. Unfortunately the code you provided messes the whole page up.
July 1, 201016 yr Author Changed it to this now? > Still the same but code a bit better? I just want the image inline with the text now?! Just so you get an idea of what im after > http://retroedgewebdesign.co.uk/link-directory/ <p><strong>Test Link Yahoo</strong> – <a href="http://www.yahoo.co.uk/" target="_blank"> http://www.yahoo.co.uk</a> This is a test of the home page of Yahoo, this is just an example, text here. Again this makes no sense at all im am just talking rubbish here.</p> <div class="directory-thumb"><a href="http://www.yahoo.co.uk/" target="_blank"> [thumbshot url="http://yahoo.co.uk"]</a></div>
July 1, 201016 yr The usual way to make two block elements (like p tags) show side by side is to give both float: left or right. I tried that but one was always below the other. It's because you have this style:- #directory p { clear:both; ........... which clears the float for the second element (which is the p tag with "Test Link Yahoo") so I used inline styles to cure it. Floated elements should also have a width, so I guessed them and this works to put the Image on the right and the p tag text on the left on the same line:- <p style="float: right; width: 120px; background: lime; clear: none;"> <a href="http://www.yahoo.co.uk/" target="_blank"><br /> <span class="thumbshot"><img class="thumbshot-img" src="http://open.thumbshots.org/image.aspx?url=http://yahoo.co.uk" border="0" /></span></a> </p> <p style="float: left; width: 490px; background: pink; clear: none;"> <strong>Test Link Yahoo</strong> – <a href="http://www.yahoo.co.uk/" target="_blank"> http://www.yahoo.co.uk</a> This is a test of the home page of Yahoo, this is just an example, text here. Again this makes no sense at all im am just talking rubbish here.</p> <div class="clear"> </div> <p style="float: right; width: 120px; background: lime; clear: none;"> <a href="http://www.yahoo.co.uk/" target="_blank"><br /> <span class="thumbshot"><img class="thumbshot-img" src="http://open.thumbshots.org/image.aspx?url=http://yahoo.co.uk" border="0" /></span></a> </p> <p style="float: left; width: 490px; background: pink; clear: none;"> <strong>Test Link Yahoo</strong> – <a href="http://www.yahoo.co.uk/" target="_blank"> http://www.yahoo.co.uk</a> This is a test of the home page of Yahoo, this is just an example, text here. Again this makes no sense at all im am just talking rubbish here.</p> <div class="clear"> </div> You then have to clear the floats between each set of two p tags with a "clear" div as I have done above. Add this style to the bottom of the stylesheet:- .clear { clear: both; width: 100%; height: 0; visibility: none; } I've got rid of the div inside the p tag and created two separate p tags with floats. If possible, get rid of the inline styles and edit the stylesheet but I didn't do it in case it affects something else.
July 1, 201016 yr Author Thank you for the reply mate, its just abit of touching up now. http://pbwebdesign-warrington.co.uk/blog/?page_id=116 The images seem to have extra space above the image mainly. ive set background colour to red to show this. If this is moved up inline with the top of the pink <p> and the images moved over to the left so they are not touching the sidebar... then i think its done. Did you mean to specify any styles for the classes below for the thumbshots, in your code there is > <span class="thumbshot"> <img class="thumbshot-img" Thanks for your help and the explanation of whats happening here, good to learn new things. Much appreciated.
July 1, 201016 yr Try this I've added a class the pics paragraphs and removed the <br/> <div class="entry-content"> <h2>Search Engine Optimisation</h2> <p class="smallpics"> <a href="http://www.yahoo.co.uk/" target="_blank"> <span class="thumbshot"><img border="0" class="thumbshot-img" src="http://open.thumbshots.org/image.aspx?url=http://yahoo.co.uk"></span></a> </p> <p style="float: left; width: 490px; background: none repeat scroll 0% 0% pink; clear: none;"> <strong>Test Link Yahoo</strong> – <a target="_blank" href="http://www.yahoo.co.uk/"> http://www.yahoo.co.uk</a><br> This is a test of the home page of Yahoo, this is just an example, text<br> here. Again this makes no sense at all im am just talking rubbish<br> here.</p> <div class="clearpara"> </div> <p class="smallpics"> <a href="http://www.yahoo.co.uk/" target="_blank"> <span class="thumbshot"><img border="0" class="thumbshot-img" src="http://open.thumbshots.org/image.aspx?url=http://yahoo.co.uk"></span></a> </p> <p style="float: left; width: 490px; background: none repeat scroll 0% 0% pink; clear: none;"> <strong>Test Link Yahoo</strong> – <a target="_blank" href="http://www.yahoo.co.uk/"> http://www.yahoo.co.uk</a><br> This is a test of the home page of Yahoo, this is just an example, text<br> here. Again this makes no sense at all im am just talking rubbish<br> here.</p> <div class="clearpara"> </div> <p class="smallpics"> <a href="http://www.yahoo.co.uk/" target="_blank"> <span class="thumbshot"><img border="0" class="thumbshot-img" src="http://open.thumbshots.org/image.aspx?url=http://yahoo.co.uk"></span></a> </p> <p style="float: left; width: 490px; background: none repeat scroll 0% 0% pink; clear: none;"> <strong>Test Link Yahoo</strong> – <a target="_blank" href="http://www.yahoo.co.uk/"> http://www.yahoo.co.uk</a><br> This is a test of the home page of Yahoo, this is just an example, text<br> here. Again this makes no sense at all im am just talking rubbish<br> here.</p> <div class="clear"> </div></div> .smallpics { float:right; padding:0 15px 0 0; } .clearpara { clear:both; height:20px;
July 1, 201016 yr Umm, has anyone mentioned that WP automatically adds <p> tags when generating the text from the database? You won't see them in WP admin add page or add post. On your offending WP theme files (i.e. if the problem is occurring on archives, edit archive.php, a single blog post would be single.php, etc.): the_content("Might be some text here"); Just before it, add: remove_filter('the_content', 'wpautop');
July 2, 201016 yr Author Umm, has anyone mentioned that WP automatically adds <p> tags when generating the text from the database? You won't see them in WP admin add page or add post. On your offending WP theme files (i.e. if the problem is occurring on archives, edit archive.php, a single blog post would be single.php, etc.): the_content("Might be some text here"); Just before it, add: remove_filter('the_content', 'wpautop'); Ahhhh that will be why then lol. Its the creating actual new pages it occurs on. That will be why it adds <p> when i haven't told it to! Couldn't get my head around why it was doing that!
July 2, 201016 yr Author New Link just realised its changed... http://pbwebdesign-warrington.co.uk/blog/?page_id=116'>http://pbwebdesign-warrington.co.uk/blog/?page_id=116 Actually, the fix for the above page has now totally messed my main blog page up > http://pbwebdesign-warrington.co.uk/blog/ Will have to fix this when i get home, im guessing its due to adding this in the css > .clear { clear: both; width: 100%; height: 0; visibility: none; }
July 2, 201016 yr Just drop all this CSS dross and use my fix - much simpler if it's only <p> tags which are causing the problem. If it only happens on pages, edit page.php or use: <?php if (is_page()) remove_filter('the_content', 'wpautop'); ?> if it only happens on blog pages, edit single.php or use: <?php if (is_single()) remove_filter('the_content', 'wpautop'); ?>
July 2, 201016 yr Author Just drop all this CSS dross and use my fix - much simpler if it's only <p> tags which are causing the problem. If it only happens on pages, edit page.php or use: <?php if (is_page()) remove_filter('the_content', 'wpautop'); ?> if it only happens on blog pages, edit single.php or use: <?php if (is_single()) remove_filter('the_content', 'wpautop'); ?> Will do mate, i am 90% certain its the <p> thats causing the issue! Will remove all css etc and give it a go when i get home, not allowed FTP access at work. Where abouts do i insert the line below in page.php? <?php if (is_page()) remove_filter('the_content', 'wpautop'); ?>
July 2, 201016 yr Where abouts do i insert the line below in page.php? <?php if (is_page()) remove_filter('the_content', 'wpautop'); ?> If you have a page.php file, just add this: remove_filter('the_content', 'wpautop'); Before: the_content("There might be some text here"); If you don't have the page.php file, add the following to index.php before the the_content("blah") text: <?php if (is_page()) remove_filter('the_content', 'wpautop'); ?> Edit: This is my page.php file (in full!): <?php /** * @package WordPress * @subpackage ALminimalistic */ get_header(); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php remove_filter('the_content', 'wpautop'); ?> <?php the_content('<p>Read the rest of this page »</p>'); ?> <?php endwhile; endif; ?> <?php get_footer(); ?>
July 2, 201016 yr Author cheers, will give it a go later and let us know how i get on. Hopefully this will sort it, its been driving me nuts for about a week now!
July 2, 201016 yr It took me about 1-2 hours to find the correct solution one night - desperately trying! If you visit my own site, the homepage is a WP page with the above hack. Without the hack the page got pretty ugly with random <p> tags splashed around which invalidated the code. Just another reason to love Wordpress
July 2, 201016 yr Author lol, at the moment my blog is a mess, ive been looking at it weeks trying all sorts! So hopefully that will sort it! A friend sent us this, might be of use its a plugin that disables the <p> http://urbangiraffe.com/plugins/disable-wpautop/ Will give your code a go in bit. Nice re-design by the way!! Looking good
Create an account or sign in to comment