PDA

View Full Version : Vertical scroll div



Ferellie
02-13-2006, 04:02 PM
Hello,
I am trying to create a vertical scrolling div 400px wide by 140px high. It contains small images.
I used a class for the images to give them a border etc. See below.
It works in IE but in Mozilla Firefox they just scroll horizontally?

I would really appreciate any help.

#divScroll {
padding-top: 5px;
padding-bottom: 5px;
border-top-width: 2px;
border-bottom-width: 5px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #22527A;
border-left-color: #22527A;
overflow: scroll;
width: 400px;
margin-top: 20px;
margin-bottom: 15px;
height: 140px;

(applied to images)
.imgScroll {
padding: 0px;
border: 4px solid #4193BE;
float: left;
margin: 5px;
clear: right;

Thank you,

Peter

jscheuer1
02-14-2006, 11:44 AM
#divScroll {
padding-top: 5px;
padding-bottom: 5px;
border-top-width: 2px;
border-bottom-width: 5px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #22527A;
border-left-color: #22527A;
overflow: scroll;
width: 400px;
margin-top: 20px;
margin-bottom: 15px;
height: 140px;
<--- missing a closing } bracket here
(applied to images) <--- this is illegal
.imgScroll {
padding: 0px;
border: 4px solid #4193BE;
float: left;
margin: 5px;
clear: right;
<--- missing a closing } bracket here


Comments in css are between these two tokens:


/* Comment goes here */

not using parenthesis. OK, once you have those basics added to your arsenal, if you didn't already know them, give this a shot:


<style type="text/css">
#divScroll {
padding-top: 5px;
padding-bottom: 5px;
border-top-width: 2px;
border-bottom-width: 5px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #22527A;
border-left-color: #22527A;
overflow: auto;
width: 400px;
margin-top: 20px;
margin-bottom: 15px;
height: 140px;
text-align:left;
}

#divScroll img { /* applied to images */
display:block;
padding: 0px;
border: 4px solid #4193BE;
margin: 5px;
}
</style>

Note: no special id or class is needed for the images. Their simple inclusion in the division with the id of divScroll will select them for this styling. Using float when trying to fill out a division with content is a mistake. Most browsers will treat floated content as though absolutely positioned in relation to the body of the document.

Ferellie
02-14-2006, 05:34 PM
Thank you very much,
I will read more and be a little more accurate in furure.

Ferellie