October 12th, 2012, 11:50 AM
CSS Spacing help
I need help with CSS spacing.
My html code is located at:
Why is there space above "Lorem..." in the third column of the first row?
How do I get rid of it?
October 12th, 2012, 12:08 PM
Try adding this:
October 12th, 2012, 12:11 PM
Thank you. Awesome works great.
Originally Posted by danramosd
But why was it aligned to the bottom and what was causing the space above it?
October 12th, 2012, 12:16 PM
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
October 12th, 2012, 12:20 PM
Im a beginner in CSS.
Thank you for the tip.
October 12th, 2012, 09:20 PM
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.
October 15th, 2012, 01:58 PM
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.
November 5th, 2012, 02:49 PM
November 5th, 2012, 05:11 PM
Thank you for all the support.