treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Padding-Top Spacing for Container

  • http://www.onedollaronebrick.com/?page_id=18

    Can anyone tell me why the padding-top on the two container boxes on this page is incongruent? There is no manual HTML spacing in the Wordpress post, and I have thoroughly looked for a padding-top line in the CSS file, but to no avail.

    Would much appreciate your help, thanks!
  • There is some empty paragraph text in each post, not sure where it comes from but might be coming from the actual content. In the Wordpress CMS, did you enter anything (space, carriage return, etc) before your table? Check the HTML tab if needed.
  • Looking over the html as Senff stated is you have an empty paragraph text in each container

    <div id="projectbody">
    <font size="+1"><p></p>
    </font>


    I don't know how your wordpress is set up, but that is the issue. If you can strip out that code that will solve your issue.

    -Bryan Luce
    w3trends.com
  • Thanks guys, but that still didn't work. Please see current page:
    http://www.onedollaronebrick.com/?page_id=18

    And CSS sheet: http://www.onedollaronebrick.com/style.css

    The main problem is that padding-top area over Current Projects.


    <div id="projectbody">
    <table width="650">
    <tr>
    <td colspan="2">
    <font size="+2">Current Projects</font>
    </td>
    </tr><tr>
    <td><img src="http://www.onedollaronebrick.com/wp-content/themes/One Dollar, One Brick by Adam Smith/images/Projects1.jpg&quot;&gt;&lt;/td&gt;
    <td><a href="http://www.onedollaronebrick.com/?page_id=228"><font size="+2">Kids of Nuqui</font></a><p />
    Summary: This project will provide the children of Nuqui with a student center that will allow them to attend high school, and help the community address waste management, water, energy, and environmental issues.</td>
    </tr><tr>
    <font size="+1">
    <td>Current Status:<br />
    <b>PHASE I</b><br />
    Fundraising Objective: <b>$25,000</b>
    </font>
    </td>
    <td>
    <form action="https://www.paypal.com/cgi-bin/webscr&quot; method="post"><input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="hosted_button_id" value="6SLQEWWHKCLGQ" />
    <table>
    <tbody>
    <tr>
    <td><input type="hidden" name="on0" value="Donate Today" />Donate Today</td>
    </tr>
    <tr>
    <td><select name="os0"> <option value="Bronze Donation">Bronze Donation : $1.00USD - monthly</option> <option value="Silver Donation">Silver Donation : $10.00USD - monthly</option> <option value="Gold Donation">Gold Donation : $25.00USD - monthly</option> </select></td>
    </tr>
    </tbody>
    </table>
    <input type="hidden" name="currency_code" value="USD" /> <input type="image" name="submit" src="http://www.onedollaronebrick.com/Donate_Button.jpg&quot; alt="PayPal - The safer, easier way to pay online!" />
    <img src="http://www.onedollaronebrick.com/wp-content/themes/One Dollar, One Brick by Adam Smith/images/Paypal.png&quot;&gt;&lt;/form&gt;
    </td>
    </tr>
    </table>
    </div>

    <p />

    <div id="projectbody">
    <table width="650">
    <tr>
    <td colspan="2">
    <font size="+2">Upcoming Projects</font>
    </td>
    </tr><tr>
    <td><img src="http://www.onedollaronebrick.com/wp-content/themes/One Dollar, One Brick by Adam Smith/images/Projects2.jpg&quot;&gt;&lt;/td&gt;
    <td><a href="#"><font size="+2">Smile - Favelas of Brazil</font></a><p />
    Summary: This project will provide the children of the favelas of Rio de Janeiro with the opportunity to learn and have adequate dental care and nutrition.
    </td>
    </tr>
    </table>
    </div>
  • Yes, and the problem is that empty paragraph tag:
    <div id="projectbody">
    <font size="+1"><p></p>
  • I don't see where that's at within my code... If you could point it out somehow that would be a huge help.


    I only see this:
    <div id="projectbody">
    <table width="650">
    <tr>
    <td colspan="2">
    <font size="+2">Current Projects</font>

    and this:
    <div id="projectbody">
    <table width="650">
    <tr>
    <td colspan="2">
    <font size="+2">Upcoming Projects</font>

    Thanks for your help!
  • Sorry, yes, that's what it looks like in Source view, you're correct. What we're seeing is in the Inspector. I'm guessing this is happening becuase '+1' and '+2' aren't valid.
  • In the source, the root of the problem is here:

    ...<font size="+2">Kids of Nuqui</font></a>
    <p />
    Summary: This project will provide the children of Nuqui with a student center that will allow them to attend high school, and help the community address waste management, water, energy, and environmental issues.</td>
    </tr>
    <tr>
    <font size="+1"></p>
    <td>Current Status:<br />
    <b>PHASE...
    There's an empty <p /> element (nothing wrong with that by itself, but then <font size="+1"></p> shows up, outside of any table cell -- so that's placed above the actual table.

    You may want to check any starting/ending paragraph tags in that area.