I've work on it for hours already and honestly now I really don't know what to do. I have a scrolling region where I have div tags in it. In ie the divs tags show up correctly but the text actually flow out of the div for no reason.

Here is the page in question: http://www.notsonuts.ca/fr/conventions_tests_PL.php (added color to the divs so it's easier to see what happen)

The problem is only in IE, works fine everywhere else

The html for one set of div is this:

<div class="top"></div>
  <div class="text">
    <table class="total_table" width="600" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><div class="top_divs"><p>Anime North</p></div></td>
      <td><div class="top_divs"><p>bla bla</p></div></td>
      <td><div class="top_divs"><p>bla bla</p></div></td>
    </tr>
  </table>
  <div class="bottom_year"><p>2008-2009</p></div>
</div>
  <div class="foot"></div>

and the .css for these is:

body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    background-color: transparent;
    text-align: left;
    padding: 0px;
    margin: 0px;
}
#wrapper {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #333;
    background-color: transparent;
    width: 650px;
    margin: 0px;
    padding: 0px;
}
.top {
    background-color: #0CC;
    background-image: url(/common/_images/rectangle_top.png);
    background-repeat: no-repeat;
    background-position: left top;
    height: 40px;
    width: 650px;
    margin: 0px;
    padding: 0px;
}
.text {
    background-color: #03F;
    background-image: url(/common/_images/rectangle_mid.png);
    background-repeat: repeat-y;
    width: 650px;
    padding: 0px;
    height: 32px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
}
.foot {
    background-color: #09F;
    background-image: url(/common/_images/rectangle_foot.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    height: 40px;
    width: 650px;
    margin: 0px;
    padding: 0px;
}
.total_table {
    height: 16px;
    width: 600px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
.top_divs {
    height: 16px;
    width: 200px;
    margin: 0px;
    text-align: left;
    vertical-align: bottom;
    position: relative;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-top: 0px;
    bottom: 6px;
}

.bottom_year {
    padding: 0px;
    height: 16px;
    width: 600px;
    position: relative;
    text-align: left;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    vertical-align: top;
    top: 6px;
}
p {
    color: #000;
    margin: 0px;
    padding: 0px;
}

Any help would be greatly appreciated
Thank you

Which version of IE? I dont see any difference between IE 8 and Firefox 3.

Originally Posted by cbeaudin

Which version of IE? I dont see any difference between IE 8 and Firefox 3.

Ah! sorry I'm using IE7 and if I remember right ie6 has the same problem. IE8 brings a new problem to the table tough. Hidden container with overflow zone are not working anymore. Anyone know a workaround for this other problem?

Thank you ffor answering

Originally Posted by fansite

Don't worry for the old browser version ... please do for the new browser version.

IE6 and IE7 are still much more in use than IE8 so I can't simply ignore these 2