Google Chrome Bug - Overflow:auto | scroll doesn't work

Question

Here's my site in Chrome with he text running outside the box:

And here it is in .IE with no problem

Here's the relevant CSS

.section
{
height: 1000px;
width: 670px;
border: thick solid rgb(51,97,120);
border-radius: 15px;
text-align: center;
padding: 0px;
background-image: url(Images/diag_pattern.png);
background-color: rgb(255,255,255);
overflow:auto;
white-space:nowrap;
text-overflow:ellipses;
}

Very annoying? Is there anything I can do. An alternative way to show my results?

Answer 1

You need to edit both your section and textarea classes:

.section {
    height: 1000px;
    width: 670px;
    border: thick solid rgb(51, 97, 120);
    border-radius: 15px;
    text-align: center;
    padding: 0px;
    background-image: url(Images/diag_pattern.png);
    background-color: rgb(255, 255, 255);
    overflow-y: hidden;      /* ---- Make this hidden */
    white-space: nowrap;
    text-overflow: ellipsis;
}
.textarea {
    height: 1000px;
    width: 650;
    padding-right: 20px;
    padding-left: 20px;
    list-style: none;
    overflow-y: scroll;      /* ---- Then make this scrollable */
}