tags:

views:

1131

answers:

2

For the issue pls see the screenshot here.

The above code has been generated by the html.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>SYM</title>
    <style type="text/css" media="all">
     @import "test.css";
    </style>
</head>
<body>
    <div id="container">
    <div class="round-box">
      <table class="round-box-layout">
        <thead><tr><td></td><td></td><td></td></tr></thead>
        <tbody><tr><td></td><td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </td><td></td></tr></tbody>
        <tfoot><tr><td></td><td></td><td></td></tr></tfoot>
      </table>
    </div>
    <div class="round-box2">
      <table class="round-box-layout">
        <thead><tr><td></td><td></td><td></td></tr></thead>
        <tbody><tr><td></td><td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </td><td></td></tr></tbody>
        <tfoot><tr><td></td><td></td><td></td></tr></tfoot>
      </table>
    </div>
<body>
</html>

The test.css is

.round-box {
  width: 250px;
}

table.round-box-layout {
  border-collapse: collapse;
  width: 100%;

}

table.round-box-layout,
.round-box-layout tr,
.round-box-layout td {
  padding: 0;
  margin: 0;
  border: solid;
}

table.round-box-layout tbody td:first-child {
  background: url(img/borders/l-e.png) repeat-y 0 0;
  height: 36px;
  width: 33px;
}

table.round-box-layout tbody td:last-child {
  background: url(img/borders/r-e.png) repeat-y 0 0;
  height: 36px;
  width: 33px;
}

table.round-box-layout thead td {
  background: url(img/borders/t-e.png) repeat-x 0 0;
  height: 36px;
  width: 33px;
}

table.round-box-layout thead td:first-child {
  background: url(img/borders/tl-c.png) no-repeat 0 0;
}

table.round-box-layout thead td:last-child {
  background: url(img/borders/tr-c.png) no-repeat 0 0;
}

table.round-box-layout tfoot td {
  background: url(img/borders/b-e.png) repeat-x 0 0;
  height: 36px;
  width: 33px;
}

table.round-box-layout tfoot td:first-child {
  background: url(img/borders/bl-c.png) no-repeat 0 0;
}

table.round-box-layout tfoot td:last-child {
  background: url(img/borders/br-c.png) no-repeat 0 0;
}

.round-box2 {
  width: 800px;
}

The problem is the first and last (third) columns' widths are getting altered. This width seems to depend on the width of container div and the text content. Please advice, how to fix this. I am using Firefox 3.

A: 

You might be able to consider COLGROUPS and COLS to accoplish this?

<table>
  <colgroup>
    <col width="36" />
    <col />
    <col width="36" />
  </colgroup>
  <tbody>
    <td>&nbsp;</td>
    <td>Content</td>
    <td>&nbsp;</td>
  </tbody>
</table>

Your other content might be ok doing via CSS, but it seems overly complex the method you've taken for what you are trying to achieve. There may be a reason for this that I don't know about of course, but as I'm experienced in trying to use the :child and :parent's in this technique - I can't really comment too much further on that. Though, I might add that sometimes, adding a   (non-breaking space character) to the empty table cells makes things respond a little more like you expect.

If the above was too HTML-y for you for whatever reason, you could create some classes to apply to the TDs, then apply the width to them.

<td class="left-content-bar">&nbsp;</td>

.left-content-bar
{
  width: 36px;
}
Amadiere
+3  A: 

The default table-layout model is auto, which takes height and widths as suggestions. Switching to the fixed model should resolve that.

That said, it looks like you are abusing tables for layout (to achieve rounded corners). There are better ways to get rounded corners.

David Dorward