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">
<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.