Forum Moderators: open
i have a little site, that is looking ok in everything (ok i say everything...) apart from IE5 mac.
which renders the page with the main content table, all over to the rhs of the page.
the page validates happily, and is and here is the problems mbe xhtml 1 transitional..
i know i cant paste links so here is some markup instead..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The White Room</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<center>
<table width="800" border="0" cellspacing="0" cellpadding="0" id="main">
<tr>
<td colspan="4"><a href="main.htm"><img src="images/wr_top_banner.gif" alt="x" width="429" height="60" class="linkimg" /></a></td>
<td width="371" colspan="2" bgcolor="#000000"> </td>
</tr>
<tr>
<td><img src="images/left_of_nav.gif" alt="." width="77" height="31" /></td>
<td><a href="whiteroom.htm"><img src="images/wr_nav1.gif" alt="White Room Vol. 1" width="159" height="31" class="linkimg" onmouseover="imgSwap(this, 1);" onmouseout="imgSwap(this, 0);" /></a></td>
<td><a href="newacts.htm"><img src="images/wr_nav2.gif" alt="New Acts" width="97" height="31" class="linkimg" onmouseover="imgSwap(this, 3);" onmouseout="imgSwap(this, 2);" /></a></td>
<td><a href="vintage.htm"><img src="images/wr_nav3.gif" alt="Vintage" width="96" height="31" class="linkimg" onmouseover="imgSwap(this, 5);" onmouseout="imgSwap(this, 4);" /></a></td>
<td><a href="aboutus.htm"><img src="images/wr_nav4.gif" alt="About Us" width="97" height="31" class="linkimg" onmouseover="imgSwap(this, 7);" onmouseout="imgSwap(this, 6);" /></a></td>
<td width="274" bgcolor="#000000"> </td>
</tr>
<tr>
<td height="359" colspan="6" id="content">
<center>
<table width="700" border="0" cellspacing="0" cellpadding="0" id="central">
<tr>
<th colspan="2"><span class="heading">The White Room Volume 1</span></th>
<th rowspan="14" width="320"><img class="album" src="images/wr_album.jpg" width="300" height="300" alt="White Room Volume 1" /></th>
</tr>
<tr>
<td>1</td>
<td><a href="media/01.m3u">x</a></td>
</tr>
<tr>
<td>2.</td>
<td><a href="media/02.m3u">x</a></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</body>
</html>
/*the main table*/
#main{
margin: 0px auto;
}
/*content is the block for the content*/
#content{
background:url(images/bg.jpg) no-repeat;
vertical-align: top;
padding: 0px auto;
}
#central{
margin: 20px auto;
background-color: #fff;
border: 2px solid #000;
font-size: .85em;
text-align:left;
}
ignore the ever helpfull comments :)
padding:0px auto; on the #content td is the problem, must be some bug, but if you take that out you can center the #central table with the margin:20px auto; in the #central rule. That's already there but not working because of the text-align:left; in the same rule.. but if you want to horizontally align text in that table you could add this:
#central th, #central td {
text-align:left;
}
/* content is the block for the content */
#content {
background:url(images/bg.jpg) no-repeat;
vertical-align: top;
padding: 0px auto; /* 'auto' is a problem in IE/Mac */
}
#central {
margin: 20px auto;
background-color: #fff;
border: 2px solid #000;
font-size: .85em;
text-align:left; /* Taking this out centers the table in IE/Mac */
}
