I originally did the entire page layout in TABLES until I found out I.E. 7 did not handle the image alignment correctly and I have already rewritten much of the page to get my three <td> areas within my main table to be spaced and centered correctly. Since I have now used <div> tags in many places to correct for formating issues with the nested tables I had, I now have basically two vertical menu bars flanking my imaging space in the center; all this is defined by a table and centered in the viewport. I have tried moving the <DIV> outside the <TD> tags, I have tried no <TD> tags which throws the whole page out of wack, I have tried to put the style attribute in the <TD> declaration and a dozen other things. What the heck is going on with this centering?
See my sample code:
Expand|Select|Wrap|Line Numbers
- <Table>
- <TR>
- <TD style="width:75px;height:400px">
- Some stuff.
- </TD>
- <TD style="width:75px;height:400px">
- <div style="width:400px;height:400px; text-align:center; vertical-align:middle;">
- <img style="z-index:1;" src="photo1.jpg">
- <img style="z-index:2;" src="photo2.jpg">
- </div>
- </TD>
- <TD style="width:75px;height:400px">
- Some stuff.
- </TD>
- </TR>
- </Table>