Remove Space Above Table

  • Resolved trinker

    (@trinker)


    11 years, 10 months ago

    I have made a table on this page here.

    It takes a while to load as there are server issues.

    There’s an inch of space between the table and the header above it I want to remove. I don’t see what’s causing this as there’s nothing in the code to create space that I see of so that tells me there’s some css parameter I want to change.

    Here’s the code I’m using to create the page:

    If you plan to attend the Literacy Student & Alumni Reunion please register for this?separately below.<hr>

<table class="certain2" border="0">
<th colspan="2"><strong>Literacy Conference Registration</strong></th>
<tr>
<td style="vertical-align:middle;"><form action="/index.php/events/claris-50th-anniversary/clari-literacy-conference/conference-registration/literacy-conference-registratio/"><input type="submit" value="Register Now!" /></form></td>
<td style="vertical-align:middle;">Saturday, June 29th, 2013 - Literacy Conference, from 8:00 - 4:30 p.m.</span>
Keynote speaker: Taffy Raphael (University of Illinois, Chicago)
</td>
</tr>

<TR><TD></TD></TR>
<TR><TD></TD></TR>
<TR><TD></TD></TR>
<TR><TD></TD></TR>

<th colspan="2"><strong>2013 UB Literacy Student & Alumni Reunion Registration</strong></th>
<tr>
<td style="vertical-align:middle;"><form action="/index.php/events/claris-50th-anniversary/clari-literacy-conference/conference-registration/student-alumni-reunion/"><input type="submit" value="Register Now!" /></form></td>
<td style="vertical-align:middle;">Friday, June 28th, 2013 - UB Literacy/Reading Reunion, from 5:30 - 7:00 p.m.</span>
Socialize with old friends, network, find out what is happening at CLaRI</td>
</tr>
</table>

    And I have modified the table using the following in the style.css

    /*changes table font size of the class certain*/
table.certain2{
	font-size:13px;
    margin: 0px;
    border-collapse: collapse;
    padding: 0px;
}

    I’m using the twenty twelve theme (with a child)

    Thank you in advance.

Viewing 15 replies - 1 through 15 (of 16 total)

  • You have a bunch of extraneous HTML in there:

    <p>
If you plan to attend the Literacy Student & Alumni Reunion please register for this separately below.
<br>
</p>
<hr>
<p></p>
<br>
<br>
<br>
<p></p>
<table class="certain2" border="0">

    Try using the TEXT editor to remove it.

    Thread Starter trinker

    (@trinker)

    WPyogi Thanks for your response. The code I copied above is from the text editor and the <br>s don’t show up there. That’s odd. Any suggestions?

    The code I copied is above the table – did you look at that post/page in the text editor?

    Sorry, misread that – what’s all this:

    <TR><TD></TD></TR>
<TR><TD></TD></TR>
<TR><TD></TD></TR>
<TR><TD></TD></TR>

    Thread Starter trinker

    (@trinker)

    That was my hacky way to insert extra rows in the table to give space in between 2 rows. I didn’t think this would have an effect above the table since it was in between rows.

    Isn’t that’s where all the extra space is?

    Thread Starter trinker

    (@trinker)

    @wpyogi When I go to the page link and inspect elements I see the extra stuff you’re talking about, but in the wordpress text editor itself the extra stuff isn’t there. What’s causing the insertion of the extra <br>s above the table?

    Thread Starter trinker

    (@trinker)

    @wpyogi no the extra white space is above the table. The 

    <TR><TD></TD></TR>
<TR><TD></TD></TR>
<TR><TD></TD></TR>
<TR><TD></TD></TR>

    business is in the middle of the table. I want the white space in between rows. it’s the white space above I want to get rid of.

    EDIT – sorry, we’re cross-posting – let me look at it again, maybe we are not talking about the same thing :)!

    Try removing this:

    <TR><TD></TD></TR>
<TR><TD></TD></TR>
<TR><TD></TD></TR>
<TR><TD></TD></TR>

    Thread Starter trinker

    (@trinker)

    Sorry I was not clear. You are correct above that the when you inspect element of the page you see:

    <p>
If you plan to attend the Literacy Student & Alumni Reunion please register for this separately below.
<br>
</p>
<hr>
<p></p>
<br>
<br>
<br>
<p></p>
<table class="certain2" border="0">

    However in the text editor I see:

    If you plan to attend the Literacy Student & Alumni Reunion please register for this separately below.<hr>

<table class="certain2" border="0">
.
.
.

    You are right that those <br> tags don’t belong but I don’t know how to remove them since I can not see them in the text editor.

    Where did you get the table code?

    These errors show some errors related to extra p tags and those extra td tags – BTW, that’s not a good way to add spaces… so maybe try removing that and see what happens.

    https://validator.w3.org/check?uri=http%3A%2F%2Fgsewebwp.gse.buffalo.edu%2Forg%2Fclari%2Findex.php%2Fevents%2Fclaris-50th-anniversary%2Fclari-literacy-conference%2Fconference-registration%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    Thread Starter trinker

    (@trinker)

    @wpyogi That fixed the space above the table. Thank you now how to a get extra space in between rows?

    YAY! Aside from more complicated CSS approaches, you CAN use an empty row like that, but try adding an empty space in the cell –

    <tr><td>&nbsp;</td></tr>

    See if that works.

    Thread Starter trinker

    (@trinker)

    Hmm putting that in has the same effect as before in that now a bunch of space appear above the table. What’s the css approach?

    I wonder if it has to do with the use of <th> tags.

    Thread Starter trinker

    (@trinker)

    I had the <th> tags outside of the <tr> tags and suspect that was the issue. I updated and will let you know if that worked.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Remove Space Above Table’ is closed to new replies.