Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- CSS - background margins


papabaer - 4:10 am on Jul 30, 2002 (gmt 0)


Hello DiAMOndDavE,

Don't apologise for asking a "too basic" question. In reality, it is not. What you are trying to accomplish is representative of the issues that often arise when developers first venture into the realm of CSS.

Basically, you are still in "table layout mode" as far as "mindset" goes. And that's okay, it's to be expected; you learn as you go along and find soltutions to various presentational issues. Then, one day, CSS will all make perfect sense and from that point on, everything will be much, much easier.

Styling tables can be a bit intimidating even for those developers moderately advanced in the world of CSS - table styles have a few important differences from the older HTML styling techniques. It's not difficult... just different is certain aspects.

For a good reference consult the W3C: [w3.org...]

But now back to your issue: You would like to have a pale yellow background with a white 10 px padding/border/spacing/blankspace or any combination thereof... Assuming ;) you will be placing something INSIDE the <td>, why not style the content to achieve your goal?

CSS is ALL about perspective and approach: Why not have a "white background" with a paragraph, div or whatever HTML element you intended to place within the table cell, styled using (if paragraph) p.ltyellow10 {background:#ffc; border:10px solid #fff; padding:3px;margin:0;}? The padding was added to give some "breathing room" for your text, the margin:0; to remove the paragraph element's default "before and after" spacing.

Then apply the style:
<td><p class="ltyellow10">My 10px-white-border-pale-yellow-background-paragraph-in-a-table-cell!</p></td> The result would give you the 10px whitespace you are looking for... and, well, you know the rest. You can use various combinations to achieve the "presentational" styling you are looking for. Experiment, have fun.

There are many methods to achieve styling in most cases. It's just a matter of perspective... ;)

<revised>
eys blurred,
mind not much better...
need zzzzz.....
</revised>

- papabaer


Thread source:: http://www.webmasterworld.com/css/254.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com