[thelist] Styling the caption tag

[Austin Harris]

Just doing a table, (of tabular data) and having a bit of trouble getting the caption to style how I want it. Or to be more specific getting IE to play.

I can get the caption on the left easily but what I want is to have a form element + label + submit button on the right;

[table caption goes here][form stuff goes here]
[table in here]

However I do it doesn't want to work, it seems that the caption is always the width of the table so sits above the form elements (in IE6). Bizarely it works in IE5 Mac! Second attempt below, I have also tried floats but that gives unexpected results in IE PC as well...

Seems a bit extreme to have to start playing with positioning to get this all working!

html:

<div class="resultsFilter">
Results filter
<label for="coverType">Cover Type</label>
<select id="coverType">
	<option>Fully comprehensive</option>
	<option>Third Party, Fire &amp; Theft</option>
	<option>Third Party, Fire &amp; Theft only</option>
</select>
<a href="#">button</a>
</div>				
<table class="resultsSupp" summary="info" cellspacing="0">
<caption><span>Other quotes that may interest you.</span></caption>
<thead>
<tr>
	<th id="Provider">Provider</th>
	<th id="Cost">Cost</th>

css:
table.resultsSupp caption {
	text-align: left;
	margin: 0 8px;
	padding: 8px 0;
}

table.resultsSupp caption span {
	background: #fc0;
	align: left;
}

.resultsFilter {
	margin: 0 0 -24px 210px;
	width: 400px;
	border: 1px solid;
}