Hi Christy,
I had a look at your web page code. Can't suggar coat this even if I try, so.....The code is a little messed up? Please let me try to explain.
When you code a web page, you should not have empty code. Example from your web page (the one in your link):
<div align="center">� </div>
<div align="center">� </div>
<div align="center">� </div>
Those 3 lines of code start a <div> then end a </div> with nothing in them. You do the same thing all over the place with font tags:
<div align="center"><font size="2"><em><strong><font face="Verdana"> </font></strong></em></font></div>
That entire line of code is trying to center nothing, make font size 2 out of no font, make it em, strong and verdana, but there is no font!?
Fixing these empty lines of code will not make the tables the same in both browsers. It will confuse the browsers a little less and at least give you a chance to fix things in the future.
Here is what I would suggest:
Make a new page.
Use tables to help align your content, but keep them simple.
You can use many tables on one page, so don't try to get all the content into one big complicated table.
Stack your tables...make one table for the first row of content.
Make another table for the second row of content.
Make another for the third row....
Make all of those tables the same width, keeping in mind that images will dictate how wide you need the table. An image with width="700" can't fit into a table of with="500". The table will stretch to the 700 pixels of the image, no matter what you try to do.
Please let me try to provide you with an example of the code I am trying to explain.
<table border="1" width="750">
<tr><!-- Row 1 -->
<td>Use your longlogo.JPG here</td><!-- Col 1 -->
</tr>
</table>
<table border="1" width="750">
<tr><!-- Row 1 -->
<td width="400">this cell for ticket and loy sponsors image</td><!-- Col 1 -->
<td width="153">this cell for "our mission" statement</td><!-- Col 2 -->
<td>this cell for the PHOTOS click here stuff.</td><!-- Col 3 -->
</tr>
</table>
<table border="1" width="750">
<tr><!-- Row 1 -->
<td width="560">this one for team.jpg</td><!-- Col 1 -->
<td>in this cell, you could use the cosanostraboot.jpg a <br> tag, then the primadonna.jpg image. This might not be exactly the best way, but you will start to see how simple tables can be easier to use.</td><!-- Col 2 -->
</tr>
</table>
<table border="1" width="750">
<tr><!-- Row 1 -->
<td width="560">novbout.jpg image and info</td><!-- Col 1 -->
<td>put the rest of your image here, make sure to use the <br> tag so that they can sit one below the other in the same cell</td><!-- Col 2 -->
</tr>
</table>
The tables above will give you the effect you want and should display better in browsers. (no guarantees)
You can play with the width of the table, the width of the <td> sections to accomodate your image widths.
You do not need to set a "height" for your table. It will adjust automatically to your content, and the height="" is not allowed in a table in html rules, so browsers will tend to ignore it anyway.
Try a test page with just the tables and the contents. See what it looks like and if you get it the way you want, switch it for the table you have on your page. If not, at least I did not mess up your page for you.
Always keep a backup of your page before making changes, just in case.
Good Luck
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
