#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    5
    Rep Power
    0

    CSS Spacing help


    I need help with CSS spacing.

    My html code is located at:
    Code:
     
    codepen.io/overdrivemachines/pen/zwrdE



    Why is there space above "Lorem..." in the third column of the first row?

    How do I get rid of it?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Jersey
    Posts
    16
    Rep Power
    0
    Try adding this:
    Code:
    .td{
    vertical-align:top;
    }
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    5
    Rep Power
    0
    Originally Posted by danramosd
    Try adding this:
    Code:
    .td{
    vertical-align:top;
    }
    Thank you. Awesome works great.
    But why was it aligned to the bottom and what was causing the space above it?
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Jersey
    Posts
    16
    Rep Power
    0
    Its most likely all of the display:table-cell; and table-row you are using. Personally i rarely, if ever use these properties (but thats just me). When it comes to display, I would say 95% of your work can be done with block, inline-block, and inline values. But it really depends on what the situation calls for.

    Based on your class names (class='td') im assuming you're coming from a background where you learned how to develop with tables? If thats true you need to know that developing with tables is very outdated. Do some research on 3 column css layouts. Chances are they will be using display:block; along with some float combinations. Hope this helps
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    5
    Rep Power
    0
    Im a beginner in CSS.

    Thank you for the tip.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Welcome to DevShed Forums, dc366 and danramosd.

    The space was caused because the default value for the "vertical-align" property, which is "baseline", was being used. Such a value for that property tends to look weird for elements that have "display:table-cell".

    "display:table-cell" can be useful, especially for vertically aligning elements. However, one has to keep in mind that IE7 and older don't support it.

    To add to what danramosd was saying about "developing with tables", don't make a common newbie mistake -- the point of table-less layouts is not to simply replace tables with <div> elements. The point is to use semantically correct markup and then use CSS to make it look the way you want it to.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Jersey
    Posts
    16
    Rep Power
    0
    Kravvitz makes some good points. And if we want to touch on cross browser compatibility, you should know display:inline-block; requires additional hacking for IE7 as well.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Originally Posted by danramosd
    And if we want to touch on cross browser compatibility, you should know display:inline-block; requires additional hacking for IE7 as well.
    Yes, inline-blocks are quite useful too.

    I prefer the second solution that's recommended over the first one, for two reasons, I avoid using separate stylesheets for IE fixes (because they can cause maintenance headaches) and the hacks used in the latter are relatively safer.

    To make an inline-block in Firefox 2, you may need to do more than simply use "display:-moz-inline-box". It typically needs an element with that declaration to have a single child element that has "display:block".

    http://www.search-this.com/2008/08/2...ck-in-a-block/
    http://gtwebdev.com/workshop/layout/...ck-gallery.php
    http://hanamidesign.com/blog/display...ser-solutions/
    http://blog.mozilla.com/webdev/2009/...-inline-block/
    Last edited by Kravvitz; November 5th, 2012 at 02:52 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    5
    Rep Power
    0
    Thank you for all the support.

IMN logo majestic logo threadwatch logo seochat tools logo