HTML and CSS Reference
In-Depth Information
tical and horizontal scroll bars for an
overflow: scroll;
element, even if the content of that element
overflows only on one axis. Chrome and Safari are a little more intelligent and show a scroll bar only when
it is needed. To work around this and make the experience more consistent across browsers, you can use the
properties
overflow-x
and
overflow-y
.
Because the
.post
element has a specified height with the default width
auto
, it never overflows horizont-
ally, only vertically. So, to make Firefox, Opera, and Internet Explorer show only a vertical scroll bar, you
can move on to step 4.
Figure 9-28
The “Latest Blog Post” with a scroll bar to allow the user to see overflowing content. Viewed in Firefox on
an Apple Mac to the left and Firefox on a Windows PC to the right.
4.
Change the property
overflow
to
overflow-y
:
overflow-y: scroll;
5.
Save styles.css.
Now, as you can see in Figure 9-29, all browsers show only the vertical scroll bar.
Figure 9-29
The “Latest Blog Post” with a vertical scroll bar only. Viewed in Firefox on an Apple Mac to the left and
Firefox on a Windows PC to the right.
Summary
