overflow showing both scrollbars when I only want the veritcal

Hi All

I'm really stumped with this one.

I'm using the overflow command so that a designated area of my web page will
show a lot of vertical content rather than my entire page being vertically
long.

It all works fine apart from the fact that the horizontal scrollbar shows
even though the content doesn't overflow to the right.

An example of my code is as follows:

==== PAGE CODE ====

<DIV CLASS="SearchResults">

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR><TD COLSPAN=2 CLASS='ResultsTitle'>2 Ruddy Road</TD></TR>
<TR>
<TD CLASS='ResultsImage'><IMG SRC='user-data/9/s649gh-2-house.jpg' WIDTH=120
HEIGHT=90 BORDER=0></TD>
<TD CLASS='ResultsDetailContainer'>

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0 CLASS='ResultsDetails'>
<TR><TD>Status: OK</TD></TR>
<TR><TD>Price: &pound;875 per month</TD></TR>
<TR><TD>Style: Detached</TD></TR>
<TR><TD>Location: Swinton</TD></TR>
</TABLE>

</TD></TR>
<TR><TD COLSPAN=2 CLASS='ResultsBtn'><IMG SRC='images/btn-details.jpg'
BORDER=0></TD></TR>
<TR><TD COLSPAN=2 CLASS='ResultsDivider'></TD></TR>
</TABLE><BR>


<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR><TD COLSPAN=2 CLASS='ResultsTitle'>32 Dingly Dell, Smithfields</TD></TR>
<TR>
<TD CLASS='ResultsImage'><IMG SRC='user-data/10/s735bs-32-house.jpg'
WIDTH=120 HEIGHT=90 BORDER=0></TD>
<TD CLASS='ResultsDetailContainer'>

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0 CLASS='ResultsDetails'>
<TR><TD>Status: OK</TD></TR>
<TR><TD>Price: &pound;650 per month</TD></TR>
<TR><TD>Style: Detached</TD></TR>
<TR><TD>Location: Wombwell</TD></TR>
</TABLE>

</TD></TR>
<TR><TD COLSPAN=2 CLASS='ResultsBtn'><IMG SRC='images/btn-details.jpg'
BORDER=0></TD></TR>
<TR><TD COLSPAN=2 CLASS='ResultsDivider'></TD></TR>
</TABLE><BR>

</DIV>

==== PAGE CODE ====

==== CSS CODE ====

..SearchResults
{
margin:0px;
padding:0px;
width:440px;
height:400px;
overflow:auto;
}

==== CSS CODE ====

As you can see a DIV container with a width of 440px contains my results
code and on-screen the result code (I turned on border=1 to see the width of
the tables) doesn't come anywhere near the max width of the DIV, ie it
doesn't need more than the 440px, yet the horizontal scrollbar still kicks
in as if you need to scroll to the right.

Do I have to do anything just to get the vertical scrollbar displayed?

Thanks

Laphan

..oO(Laphan)

I'm really stumped with this one.

I'm using the overflow command

Property, not command.

so that a designated area of my web page will
show a lot of vertical content rather than my entire page being vertically
long.

Why not let the page just flow and scroll vertically? That's how
billions of websites work, because it's the most userfriendly way.

Of course a real URL would help to see what you're trying to achieve
actually, because in some cases such a scrolling box can be a useful
tool. But unfortunately it's used improperly way too often.

It all works fine apart from the fact that the horizontal scrollbar shows
even though the content doesn't overflow to the right.

With the 'overflow' property most if not all browsers will show both
scrollbars, even if not needed. There are also the 'overflow-x' and
'overflow-y' properties, which are part of CSS 3, but should already
work in most browsers (Opera as of 9.5, FF and IE are fine).

Micha

Many thanks guys


"Michael Fesser" <netizen (AT) gmx (DOT) de> wrote

..oO(Laphan)

I'm really stumped with this one.

I'm using the overflow command

Property, not command.

so that a designated area of my web page will
show a lot of vertical content rather than my entire page being vertically
long.

Why not let the page just flow and scroll vertically? That's how
billions of websites work, because it's the most userfriendly way.

Of course a real URL would help to see what you're trying to achieve
actually, because in some cases such a scrolling box can be a useful
tool. But unfortunately it's used improperly way too often.

It all works fine apart from the fact that the horizontal scrollbar shows
even though the content doesn't overflow to the right.

With the 'overflow' property most if not all browsers will show both
scrollbars, even if not needed. There are also the 'overflow-x' and
'overflow-y' properties, which are part of CSS 3, but should already
work in most browsers (Opera as of 9.5, FF and IE are fine).

Micha