percentage width and em margins problem

[Andy Moss]

I have a table wrapped in a div like this:

<div id="content"><table id="calendar">
<tr>
<th id="caldate"><span>Date</span></th>
<th id="caltitle"><span>Title</span></th>
<th id="caltime"><span>Time</span></th>
<th id="calroom"><span>Room</span></th>
<th id="calvenue"><span>Venue</span></th>
</tr>
<tr>
<td>hgbfdds</td>
<td>hgbfdds</td>
<td>hgbfdds</td>
<td>hgbfdds</td>
<td>hgbfdds</td>
</tr>
</table></div>

im using tables as it is tabular data, its not for layout purposes. my
div tag has these properties:

#content {
margin-left: 12.2em;
border: 1px solid #006699;
margin-right: 0.2em;
margin-top: 1em;
}

my table has these properties in the style sheet:

table {
border: none;
margin-left: 0.2em;
margin-right: 0.2em;
}
#calendar {
border: none;
margin-left: 0.2em;
margin-right: 0.2em;
width: 100%;
}
#calendar tr {
border-bottom: dashed 1px #006EAB
}
#calendar td {
padding: 5px 3px;
}

what happens is the table is taking up 100% of the width of the
document + the 12em margin of the div + the o.2em + 0.2em. shouldnt
the table be taking up 100% of the div width? anybody have a
solution/advice for this problem. As always any help is much
appreciated

Thanks

Andy

[Gerhard Fiedler]

what happens if you remove the width:100% from the #calendar style?

On 28 Aug 2003 02:09:53 -0700, wh*****@hotmail.com (Andy Moss) wrote:

I have a table wrapped in a div like this:

<div id="content"><table id="calendar">
<tr>
<th id="caldate"><span>Date</span></th>
<th id="caltitle"><span>Title</span></th>
<th id="caltime"><span>Time</span></th>
<th id="calroom"><span>Room</span></th>
<th id="calvenue"><span>Venue</span></th>
</tr>
<tr>
<td>hgbfdds</td>
<td>hgbfdds</td>
<td>hgbfdds</td>
<td>hgbfdds</td>
<td>hgbfdds</td>
</tr>
</table></div>

im using tables as it is tabular data, its not for layout purposes. my
div tag has these properties:

#content {
margin-left: 12.2em;
border: 1px solid #006699;
margin-right: 0.2em;
margin-top: 1em;
}

my table has these properties in the style sheet:

table {
border: none;
margin-left: 0.2em;
margin-right: 0.2em;
}
#calendar {
border: none;
margin-left: 0.2em;
margin-right: 0.2em;
width: 100%;
}
#calendar tr {
border-bottom: dashed 1px #006EAB
}
#calendar td {
padding: 5px 3px;
}

what happens is the table is taking up 100% of the width of the
document + the 12em margin of the div + the o.2em + 0.2em. shouldnt
the table be taking up 100% of the div width? anybody have a
solution/advice for this problem. As always any help is much
appreciated

Thanks

Andy

[Andy Moss]

Gerhard Fiedler wrote:

what happens if you remove the width:100% from the #calendar style?

On 28 Aug 2003 02:09:53 -0700, wh*****@hotmail.com (Andy Moss) wrote:

I have a table wrapped in a div like this:

<div id="content"><table id="calendar">
<tr>
<th id="caldate"><span>Date</span></th>
<th id="caltitle"><span>Title</span></th>
<th id="caltime"><span>Time</span></th>
<th id="calroom"><span>Room</span></th>
<th id="calvenue"><span>Venue</span></th>
</tr>
<tr>
<td>hgbfdds</td>
<td>hgbfdds</td>
<td>hgbfdds</td>
<td>hgbfdds</td>
<td>hgbfdds</td>
</tr>
</table></div>

im using tables as it is tabular data, its not for layout purposes. my
div tag has these properties:

#content {
margin-left: 12.2em;
border: 1px solid #006699;
margin-right: 0.2em;
margin-top: 1em;
}

my table has these properties in the style sheet:

table {
border: none;
margin-left: 0.2em;
margin-right: 0.2em;
}
#calendar {
border: none;
margin-left: 0.2em;
margin-right: 0.2em;
width: 100%;
}
#calendar tr {
border-bottom: dashed 1px #006EAB
}
#calendar td {
padding: 5px 3px;
}

what happens is the table is taking up 100% of the width of the
document + the 12em margin of the div + the o.2em + 0.2em. shouldnt
the table be taking up 100% of the div width? anybody have a
solution/advice for this problem. As always any help is much
appreciated

Thanks

Andy

if i remove the width:100% from the #calendar properties it doesn't fill
the containing div. If i use the 100% it works fine in Moz (no surprises
there ;)