Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Handling overflow

    Hi all,
    On this page's main slider and the 6-story box beneath, there are some issues handling overflow. Varying heights of headlines and images make text cut off on the bottom of their containers.

    Ideally, I would like no text to be cut off and for there to be an ellipsis (...) at the point where the text is cut off.

    Is this possible? Thank you for your help.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello graud,
    I prefer not to set heights on elements and allow them to expand to contain what you put in them.
    Like this -
    Code:
    .homecontent_02 .info2 {
        background: none repeat scroll 0 0 #FFFFFF;
        border-right: 4px solid #FFFFFF;
        display: inline-block;
        float: left;
        /*height: 90px;*/
        margin: 0 1px 0 0;
        overflow: hidden;
        padding: 0 10px 10px;
        width: 320px;
    }
    .homecontent_02 .holder p {
        font-size: 11px;
        /*height: 52px;*/
        line-height: 18px;
        margin: 2px 0 0;
        overflow: hidden;
        padding: 0 2px !important;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Yea I noticed that when I declare heights on elements, when you zoom out of the browser and/or different resolutions, you will notice a paragraph for instance will 'overflow' your div/container. Just give the desired padding to the bottom of the element and delete the height.

    Regards,

    LC.

  • #4
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your quick responses.
    My problem is that the paragraph elements (eg. in div class "feature_info" in the main carousel) print much more text than is shown and the bottom of the "feature_list" container cuts the text.

    I can't seem to remove the height from "feature_list". When I add the padding to "feature_list", this still happens, space is just added between the cut text and the bottom of the container, as you can see in the attachment.

    Is there anything that can be done about this?
    Attached Thumbnails Attached Thumbnails Handling overflow-screen-shot-2012-12-10-1.15.17-pm.png  

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by graud View Post

    Is there anything that can be done about this?
    Maybe like this -
    Code:
    div#feature_list {
        /*height: 390px;
        overflow: hidden;*/
        position: relative;
        width: 474px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you try this in Firefox or Chrome Developer Tools, when you remove the height, the entire container and all of the content is erased. So it looks like I need to keep the height declaration. Nothing happens when I remove the overflow:hidden; statement.

    Thanks

  • #7
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump. Anyone have any ideas on stopping the text from getting sliced at the bottom of the container?

    As per above, removing the height line in div#feature_list removes the whole carousel.

    See page here.


  •  

    Posting Permissions

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