alignment of table problem

[luoifong]

I have a table inside of a div block as follows:

<div id="twoColLeft">
.
.
.
<table id="confScheduleTable" align="center" border="0" cellpadding="5" cellspacing="0">
<tr>
<th id="confScheduleTableTitle" colspan="4">Table Title</th>
</tr>
<tr>
<th>header 1</th>
<th class="confSessHeader">header 2</th>
<th class="confSessHeader">header 3</th>
<th class="confSessHeader">header 4</th>
</tr>
.
.
.
</div>

The relevant css (i think this is the only relevant css for this problem)

#twoColLeft {
float: right;
background-color: transparent;
margin: 0;
padding: 0;
border: 0;
width: 526px;
}
#confScheduleTable { margin: 15px 0; }

My problem is that in NS7 and Safari(mac) the table is aligning left in the div block...it centers fine in other browsers. Then if I remove the id="confScheduleTable" from the table tag, it centers okay in all browsers. I'm not sure why/how the id="confScheduleTable" is affecting the alignment of the table. I would prefer to leave it in. Can anyone explain where I'm going wrong?

Let me know if I need to list more of my code.

[your_store]

I would say your problem is because you are relying on the depreciated align="center" on your table. You should center the table using css instead.

[luoifong]

using the text-align property? I tried that (took out deprecated tag and used css instead) but the table itself is still aligned to the left, and then all of the content in the table cells are aligned center in their respective cells. definitely not what I was looking for.

besides, although I would prefer not to use deprecated tags/attributes, it should still work shouldn't it?

[your_store]

Text-align only works for centering block elements in IE; because, it is an incorrect interpretation of the rule. In standards compliant browsers, i.e. the ones you are having problems with, you center block objects using an auto margin value.

For Netscape:

#confScheduleTableTitle {
margin: 0 auto;
}

For IE:

#twoColLeft {
text-align: center;
}

#twoColLeft td {
text-align: left; /*reset alignment for cells
}

For the future, you might want to start designing for Netscape / Moz. first. You can then use a number of different hacks to make IE behave correctly. It really makes using css much more effecient.

[luoifong]

great, that's very helpful! I have to leave my desk, but I'll implement when I get back and post if I have any further problems.

Thanks for the help!