Div Height Issue

[abhi3d]

Hi I am creating a site using DIV/CSS. The issue is the overflown contents are hiding. I have given height 100% to body. no height for the center container div. I know that is because of overflow: hidden. but if I remove that. the DIV doesn't expand heightwise at all.

See the example here:

http://www.abhi3d.com/abhi/bee/achleader.php 

It looks OK in IE but not in FF and Chrome.

===========================================================
Screenshots
===========================================================

Full Contents Showing here.


Div Hiding Contents issue



Here is the Code.

================================================
HTML
==================================================

<div id="MainContentsFullWidth">
    <p class="style2 center TopMarginZero"><u>Postcards</u></p>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="33%" align="center" valign="top"><img src="images/teacherhelpercard1.png" width="180" height="120" alt="Teachr Helper Card" class="ImageBorder"><br>
      <span class="bold">Order Code TH01</span></td>
    <td width="33%" align="center" valign="top"><img src="images/groupworkcard1.png" width="180" height="120" alt="Group Work Award" class="ImageBorder"><br>
      <span class="bold">Order Code GW01</span></td>
    <td width="33%" align="center" valign="top"><img src="images/hoycard2.png" width="180" height="120" alt="Head Of Year Award" class="ImageBorder"><br>
      <span class="bold">HOY01</span></td>
    </tr>
  <tr>
    <td height="10" colspan="3" align="center" valign="top"></td>
    </tr>
  <tr>
    <td align="center" valign="top"><img src="images/achleadercard1.png" width="180" height="120" alt="Achievement Leader Award" class="ImageBorder"><br>
      <span class="bold">Order Code AL01</span></td>
    <td align="center" valign="top"><img src="images/hardworkercard1.png" width="180" height="120" alt="Hard Worker" class="ImageBorder"><br>
      <span class="bold">Order Code HW01 </span></td>
    <td align="center" valign="top"><img src="images/backpostacrd.png" width="180" height="120" alt="Back Post Card" class="ImageBorder"><br>
      <span class="bold">Postcard Message</span></td>
  </tr>
  <tr>
    <td height="10" colspan="3" align="center" valign="top"></td>
  </tr>
  <tr>
    <td height="10" colspan="3" align="center" valign="top" class="style5 bold">All stickers and postcards have a unique code for pupils to register at (URL address blocked: See forum rules)</td>
  </tr>
    </table>
    <div id="Next" class="clearboth"><a href="#"><strong>Next</strong></a></div>
    </div>
  </div>

  </div>
          <div class="clearboth"></div>
  </div> 

================================================
Download CSS Here
================================================

http://www.abhi3d.com/abhi/bee/beegifted.css 

================================================

Any Help?

Thanks in Advance

Abhi

[remp]

it looks fine on my end when it comes to the height ( both on firefox and chrome.) have you fixed the issue already?

but you do have the session_start() error message there...

[abhi3d]

No I haven't yet fixed it... I have Windows 7 installed, Firefox 3.6.12, and Chrome 7.0. And the sesseion_start isn't the issue related to this.

[jscheuer1]

The abhi3d.com/abhi/bee/achleader.php file looks the same to me in IE 8 and Firefox 3.6.12, both under Windows 7.

But this is different than either of your screenshots. The bee links (registration through prizes) are on their own with postcards wrapped below that with all of the content including the next link. And the bee links menu's curved corners are cut off slightly at the top.

As I say though, this is all identical in Fx and IE.

[abhi3d]

Sorry I forgot to Post.. I have fixed the page.

[jscheuer1]

Yeah, looks nice now.