Grow your CSS skills. Land your dream job.

css overflow problem IE

  • # March 2, 2009 at 9:20 pm

    when using the startStop slider in IE, it is moving to far on the second slide so the left side is cut off on the second and third slide.

    http://www.newtelsystems.com/newtest/

    any ideas?

    i really appreciate your help

    # March 4, 2009 at 4:47 am

    I believe the code below should fix your problem. Just delete the text in your file css/style.css and replace it with the code below.

    The reason why it was being cutoff was because on the .slide div it had a padding of

    Code:
    padding: 8px 10px;

    Which means it was having 8px on the top and bottom and 10px left and right.

    when I changed it to the code below it gave a 20px padding at the top so it pushes the headings and images down but has no padding on the right or the left or the bottom. (It works like a clock first value (top) second value (right) and so on around the clock in a clockwise direction). This is how I remember it. Hope this helps, let me know if you have any problems implementing the code.

    Andrew

    Code:
    padding: 20px 0 0 0;
    Code:
    a {
    text-decoration: none;
    outline: none;
    }
    a img {
    border: none;
    }
    h2 {
    font-family: Georgia, Serif;
    font-size: 36px; text-align: center;
    font-weight: normal;
    }
    #page-wrap {
    background: white;
    width: 720px;
    padding: 120px 20px;
    }
    #slider {
    background: white;
    height: 210px;
    overflow: hidden;
    position: relative;
    margin: 10px 0;
    width: 700;
    }
    /* DEFAULT is for three panels in width, adjust as needed
    This only matters if JS is OFF, otherwise JS sets this. */
    #mover {
    width: 720px;
    position: absolute;
    background: white;
    }
    .slide {
    padding: 20px 0 0 0;
    width: 720px;
    float: left;
    position: relative;
    background: white;
    }
    .slide h1 {
    font-family: Helvetica, Sans-Serif;
    font-size: 30px; letter-spacing: -1px;
    color: #4E76B4;
    }
    .slide p {
    color: #999;
    font-size: 12px;
    line-height: 22px;
    width: 300px;
    }
    .slide img {
    position: absolute;
    top: 20px;
    left: 400px;
    }
    #slider-stopper {
    position: absolute;
    top: 210px;
    right: 10px;
    background: gray;
    color: white;
    padding: 3px 3px;
    font-size: 10px;
    text-transform: uppercase;
    z-index: 1000;
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".