Results 1 to 3 of 3

Thread: Vertical scroll div

  1. #1
    Join Date
    Feb 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Vertical scroll div

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Ferellie

    #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:

    Code:
    /* 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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much,
    I will read more and be a little more accurate in furure.

    Ferellie

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •