Converting Table Layout To Div

Question

I'm implementing a comment control that uses an ASP.Repeater to display each comment. The comment itself is currently displayed using a table to divide up some images to display the comment in a bubble.

I know that tables are supposed to be the epitome of evil for design layout, and really expensive to display for the browser, but I'm not exactly sure how to put my rounded corners in the correct location and make sure everything lines up.

Does anyone have any suggestions, examples, hacks for the HTML/CSS required, or should I just stick with tables and hope for the best?

Answer 1

The best resource I've seen for creating rounded corners using DIV elements was an article on "A List Apart" - see http://alistapart.com/articles/customcorners/. If you're looking to use DIV elements to layout your entire site, there are several other relevant articles on that site. See:

http://alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/
http://www.alistapart.com/articles/negativemargins/

Answer 2

There are a few different ways to do rounded corners in CSS

I prefer using CSS to tables whenever possible, just because I find the code to be a lot easier to maintain, and this sounds like a project with the perfect scope to get your feet wet.

Answer 3

In short you would want something like this:

<style>
  .start { background-image: url("topofbubble.png"); height: <heightofimage>; }
  .end { background-image: url("bottomofbubble.png"); height: <heightofimage>; }
  .body {background-image: url("sliceofbubblemiddle.png"); }
</style>

...

<div class="comment">
  <span class="start"></span>
  <span class="body">I would like to say that div layouts are far better than table layouts.</span>
  <span class="end"></style>
</div>

That should get you started. I did not try the code specifically and can make a complete example if necessary.

Answer 4

If you are willing to present IE users with sharp corners, rounded corners are trivially solvable with the border-radius CSS property. No browser currently implements it as a base property but several do as a prefixed property. For example, to use it in firefox, you would use the property -moz-border-radius, for Safari, use -webkit-border-radius, etc.