How to extricate caption from table's border?

[Doctor Colossus]

I can't tell whether this is an HTML or a CSS issue. <snip> I'd like to have the caption of the table outside of the regular table border -- actually Internet Explorer is the only browser rendering currently rendering it as I desire -- not Mozilla Firefox, nor Google Chrome, nor Opera -- which would indicate that I'm doing something wrong; but I haven't any idea what...

On the following links, you can see examples of other peoples' table captions, which behave in the way I admire:
[meta.wikimedia.org ]
[htmlgoodies.com ]

But I can't see any difference between their HTML and mine, except that one or two of the examples I saw were in older-style HTML. I've gone through all the styles affecting my calendar table using Firebug, but I can't seem to isolate any that are causing my table to behave differently from anyone else's.

This is my HTML, which acts funny:

<table id="startCal" class="calendar">
<caption>&lt; January &gt;</caption>
<tr><th>Su</th><th>M</th><th>T</th><th>W</th><th>Th</th><th>F</th><th>Sa</th></tr>
<tr>
<td /><td /><td /><td /><td class="full">1</td><td class="full">2</td><td class="full">3</td></tr>
<!-- ... etc. -->
</table>

This is another guy's, which works as one would expect:

<table id="TAB1">
<caption>This is My Table</caption>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
 <!-- ... etc. -->
 </table>

I can't see the difference! It's driving me nuts. Any ideas?

Thanks a lot,
Casey

[edited by: eelixduppy at 4:51 pm (utc) on Jan. 18, 2009]
[edit reason] no personal URLs, please [/edit]

[Doctor Colossus]

Ah, and per the sticky's request my DOCTYPE is XHTML 1.0 Strict.

Here are all of my CSS rules which relate to tables:

div#header, h1, h2, p, ul, table {color: white; display: block;}
table {margin: 10px 10px 10px 15px;}
table.calendar {color: white; border: solid 1px; border-collapse: collapse; margin: 5px 0 0 0; float: left;}
table.calendar th {border-bottom-style: solid; border-bottom-width: 1px; border-spacing: 0;}
table.calendar th, table.calendar td {text-align: center; padding: 2px;}
td {vertical-align: top}

[lavazza]

Welcome to the Forums :)

actually Internet Explorer is the only browser rendering currently rendering it as I desire

As far as I'm aware, unlike <br /> and <hr />, there's no self-closing version of the TD tag and I suspect its merely a fluke that Interweb Exploiter mangles your code into something resembling what you expect/desire

Anyhoo...

Instead of:

<td /><td /><td /><td /><td class="full">1</td><td class="full">2</td><td class="full">3</td></tr> 

Try this:

<td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td><td class="full">1</td><td class="full">2</td><td class="full">3</td></tr> 

----

PS: Have you considered using HTML4.01 STRICT instead of XHTML 1.0 Strict?

See Why most of us should NOT use XHTML [webmasterworld.com]
and FAQ: choosing the best doctype for your site [webmasterworld.com]

[Doctor Colossus]

Thank-you for your welcome greeting!

Also thanks very much for the suggestions -- the self-closing TD element was a very good guess at the culprit. I picked the habit up from someone else's source I was poking around in just the other day. To tell the truth, I wasn't convinced it was invalid (W3C's validator passed it without errors or warnings) until I read this [w3.org].

I feel the same way you do about Internet Explorer. The fact that it's the only browser giving me my sought-after result does make me suspect that I'm doing something wrong.

Back to the problem, though: I made the change you recommended regarding TD tags, and also tried -- momentarily -- switching the DOCTYPE to HTML 4.01 STRICT*, but these changes didn't improve or change the rendering.

I notice that the link to my test site was removed° -- as well of one of the three example URLs I gave [maconstateit.net], for some reason -- so I'll try to clarify my problem better: The caption of a table normally appears outside of (above or around) a table's border -- but in my case, the table's border is wrapping around the caption too, which is not what I want!

Aloha,
Casey

* I'll read more on that soon per your recommendations, but I've never experienced troubles using XHTML and I don't think my problem has to do with the DOCTYPE issue.

° eelixduppy: I wish the sentence "Click the [show calendar] link, and you'll see my trouble." were also removed from my original post, since it doesn't make sense out of context.

[edited by: eelixduppy at 4:54 pm (utc) on Jan. 18, 2009]