Prev: is it possible to float a div to the bottom of its parent div?
Next: menu issues again!
From: Laphan on 6 Apr 2008 11:50
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


From: Beauregard T. Shagnasty on 6 Apr 2008 11:58
In alt.www.webmaster, Laphan wrote:

> I'm really stumped with this one.

How about providing a link to your best effort.

Your code is missing too much, including what DOCTYPE you are using,
which could be critical to how browsers handle your HTML.

440px? Why do that? What if I need to increase your text size so i can
read it? "Pixel precision" never works.

--
-bts
-Friends don't let friends drive Vista
From: Michael Fesser on 6 Apr 2008 12:20
..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
From: Laphan on 6 Apr 2008 20:01
Many thanks guys


"Michael Fesser" <netizen(a)gmx.de> wrote in message
news:v1thv3le7gnrrg7ljfk9051acajb48mb6n(a)4ax.com...
..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


 | 
Pages: 1
Prev: is it possible to float a div to the bottom of its parent div?
Next: menu issues again!