WordPress.org

1. newitus
   Member
   Posted 5 years ago #

   Hi,

   There is a big gap between my first word and the table below on a Page. But I don't have any extra html code between there. (even I took out the first line of words, my table still being push down so far with the big gap above) How would that be? Any solution would be greatly appreciated.

   I tried with different templates, but it returned the same. I asked my hosting (dreamhost). They don't think it's the problem from the latest php version 5.2.1 and should be related to WP latest 2.1.2 then.

   Please see at
   

   Thank you.

2. Otto
   Tech Ninja
   Posted 5 years ago #

   At the end of every row of your table, there's a outside the actual table contents. These are getting shoved up above the table because they're not part of the table itself, though they are enclosed by it.

   WordPress is likely adding these because of the newlines in your table's html. Remove those newlines and the BR's should go away, along with the extra space.

3. newitus
   Member
   Posted 5 years ago #

   Hi Otto42,

   Thanks for helping out. I don't get what you were talking about. Here is the code

   <p>(Moving Blankets)</p>
   <TABLE BORDER>
   <TR><TD ALIGN=CENTER>SIZE</TD><TD ALIGN=CENTER>LBS/DOZEN</TD><TD ALIGN=CENTER>COLOR</TD></TR>
   <TR><TD ALIGN=LEFT>70" x 80"</TD><TD ALIGN=CENTER>80 - 84</TD><TD ALIGN=LEFT>Green/Gray</TD></TR>
   <TR><TD ALIGN=LEFT>70" x 80"</TD><TD ALIGN=CENTER>80 - 84</TD><TD ALIGN=LEFT>Dark Blue/Light Blue</TD></TR>
   <TR><TD ALIGN=LEFT>70" x 80"</TD><TD ALIGN=CENTER>72 - 75</TD><TD ALIGN=LEFT>Green/Gray</TD></TR>
   <TR><TD ALIGN=LEFT>70" x 80"</TD><TD ALIGN=CENTER>72 - 75</TD><TD ALIGN=LEFT>Dark Blue/Light Blue</TD></TR>
   <TR><TD ALIGN=LEFT>70" x 80"</TD><TD ALIGN=CENTER>65 - 70</TD><TD ALIGN=LEFT>Light Blue/Black</TD></TR>
   <TR><TD ALIGN=LEFT>70" x 54"</TD><TD ALIGN=CENTER>35 - 40</TD><TD ALIGN=LEFT>Light Blue/Black</TD></TR>
   </TABLE>

   Can you point out specifically on the code?

   Thank you.

4. newitus
   Member
   Posted 5 years ago #

   Hi,

   After I updated the "Parent Pages" plugin option (include current page), the gap seems getting smaller. But even I deactivated it, the gap still exists.

   Any help?

5. Otto
   Tech Ninja
   Posted 5 years ago #

   The fact that you have that table on multiple lines is the problem. Take this for example:

   <TABLE BORDER>
   <TR>...

   WordPress sees the end of line after <TABLE BORDER> and adds a <BR /> there.

   So, remove the end of line. Make all of that table into one big run on line, without carriage returns.

6. macwise
   Member
   Posted 5 years ago #

   newitus,

   change this:
   <p>(Moving Blankets)</p>

   to this:
   <p style="margin-bottom: 0px;">(Moving Blankets)</p>

   That can be modified, btw, to be any value you like. If you'd like a 5px margin on the bottom, then you can change 0px to 5px.

7. macwise
   Member
   Posted 5 years ago #

   by the way, the margin at the bottom of your p tags is specified in your css file. You can override this margin globally for your p tags if you like by changing the class in that file.

8. Otto
   Tech Ninja
   Posted 5 years ago #

   macwise: That won't solve his problem. Look at the page in Firefox's DOM Inspector. Notice all the BR's?

9. newitus
   Member
   Posted 5 years ago #

   Hi Otto42,

   I use the same template/plugin/code at chupkg.com/product
   and no big gap come out. (2.0.2)

   So it's the version 2.1.12 change causing the problem?

   Thank you.

10. Otto
    Tech Ninja
    Posted 5 years ago #

    It's most likely one of the changes that was made to the wpautop function, yes.

11. newitus
    Member
    Posted 5 years ago #

    Otto42,

    BTW, how did you view the BRs in Firefox DOM inspector? I'm using Firefox 2.0 and went there but found no BRs.

    I will try to modify the table as you said.

    Thanks again.

12. macwise
    Member
    Posted 5 years ago #

    you're right, Otto42. I was referring to his code he pasted here, not specifically to that section in his output source. If those BR's aren't there in his original source, then this is a WP bug, isn't it?

    Also, part of his problem appears to be a case of a collapsing p element which should be surrounding the table. Is this what I'm seeing there? (only saw it when I went to the dom inspector). This would also seem the case since in the dom inspector, there are two BR's before the table, where in his output source there is only one before the table, and one after it. I'm guessing this is much of the issue.

    Newitus, try putting this at the end of your table, before the closing P tag:

    <p class="clearing"></p>

    Then, in your stylesheet, put this:

    .clearing {
    	clear: both;
    	display: block;
    	border: 0;
    	padding: 0;
    	margin: 0;
    }

    If this isn't a collapsing P element, then forget I even spoke.

13. macwise
    Member
    Posted 5 years ago #

    p.s. this still won't fix the BR's appearing from apparently nowhere, but it might put the one at the bottom of the table back where it belongs. It will also get rid of the gap from the bottom margin of the collapsing p element.

14. newitus
    Member
    Posted 5 years ago #

    Hi Otto42,

    I'm getting closer after I put the whole html table code into one line.

    OK, I will try macwise's suggestion too to see if it close totally.

    Thanks to all.

15. Otto
    Tech Ninja
    Posted 5 years ago #

    If those BR's aren't there in his original source, then this is a WP bug, isn't it?

    wpautop has no shortage of html code that it does not work properly on.

16. newitus
    Member
    Posted 5 years ago #

    Hi,

    I also tried macwise's solution but still not close totally.

    wpautop has no shortage of html code that it does not work properly on.

    Confusing, is it a bug, right? User has to putting the whole table code into one line to avoid the spaces came from nowhere.

    Plus, I believe that "Parent Pages" plugin
    isn't working because the 2.1.12 upgrade too.

    Can you two professionals take a look as well?

    Thanks a lot!

17. newitus
    Member
    Posted 5 years ago #

    Sorry on messing up with the link text.

    
    here is right

18. macwise
    Member
    Posted 5 years ago #

    newitus,

    I downloaded your output source, and the information I gave you was incorrect. However, your p element is indeed collapsing. You can see by adding this to the p element that is encasing your table:

    change "<p>" to "<p style="border: solid 1px red;">"

    Here's what worked for me:

    You currently have a "p" element encasing the table, and for some reason, that's collapsing. Change this to a div element, and your problems disappear. Try this:

    <p>(Moving Blankets)</p>
    <div>
    <TABLE BORDER="1">
    <TR>....</TR>
    </TABLE>
    </div>

    Changing this to a div element causes the table to be housed correctly, and your collapse no longer occurs. Check out the validator page to see what other problems might be getting in your way:

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.movingpads.com%2Fproduct%2Fmoving-pads%2F

    Hope this helps!

19. macwise
    Member
    Posted 5 years ago #

    BTW, the BR's are a different issue. I was able to take them out of my version of your code, because I was working with static code, but you may still have issues with them. The solution above will at least get you on the way so when you can get the BR's out of the way, you'll be good to go.

20. newitus
    Member
    Posted 5 years ago #

    Hi macwise,

    Adding the <div>...</div> doesn't help. It's not related to the p element. You could check at here

    Plus, the w3 validator states over 50 errors on my pages, starting on the "border" attribute doesn't recognized. I don't know what I should listen to.

    Thanks.

21. Otto
    Tech Ninja
    Posted 5 years ago #

    The border attribute is not valid xhtml, and the way you're using it is not valid HTML either. Still, that won't cause the specific problem you're talking about, which is why I didn't mention it.

22. newitus
    Member
    Posted 5 years ago #

    Hi Otto42,

    Can you please point me out a valid html table code sample?

    How do we submit request to fix this space bug for wpautop function?

    Thanks again.

23. newitus
    Member
    Posted 5 years ago #

    Hi Otto42,

    You think this bug is related to my other support request?

    Thanks a lot.

24. newitus
    Member
    Posted 5 years ago #

    Hi macwise,

    I have to update my demo page correctly this time.

    Thanks for helping along anyway.

25. Root
    Member
    Posted 5 years ago #

    When you say your *first word* what do you mean? The header has a very big gap below it.

26. newitus
    Member
    Posted 5 years ago #

    Hi Root,

    It's all fixed with Otto's help. The header gap is not related to what I asked. If you want to see the problem yourself, you could copy the first piece code I pasted here and put on a new WP 2.1.12 page.

27. jeremyduffy
    Member
    Posted 4 years ago #

    Here's a simple solution to the problem that doesn't require plugins or fancy hacks, but still lets you write code cleanly:

    http://www.jeremyduffy.com/computers-internet/wordpress-stuff/p_and_br_tag_fix_for_wordpress/

Topic Closed

This topic has been closed to new replies.