Grow your CSS skills. Land your dream job.

Cannot remove border. Cannot fix proportions.

  • # October 25, 2009 at 4:40 pm

    Hello, I am having troubles fixing a few small issues. I have provided both the html and the css, as well as a screenshot. Here are the issues.

    I like the photo’s on the page but I don’t want the images at the top to have a border.

    I like the size of the photo thumbnails, but the flickr ones are distorting. I don’t mind if there is clipping, but I want to keep that size.

    I assume that if both these are fixed than the distorted header images will be fixed by default, but if not than I need them to be sized appropriately.

    I also would like to have everything center a little nicer.

    Thanks for any help.

    [img]http://s3.amazonaws.com/scrnshots.com/screenshots/205113/screen_shot_2009-10-25_at_41529_pmpng_large[/img]

    CSS

    Code:
    /*
    Chris Coyier

    http://css-tricks.com

    */

    * {
    margin: 0;
    padding: 0;
    }
    html, body, #bg, #bg table, #bg td {
    height:100%;
    width:100%;
    overflow:hidden;
    }
    #bg {
    position: fixed;
    }
    #bg div {
    height:200%;
    left:-50%;
    position:absolute;
    top:-50%;
    width:200%;
    }
    #bg td {
    text-align:center;
    vertical-align:middle;
    }
    #bg img {
    margin:0 auto;
    min-height:50%;
    min-width:50%;
    }
    #cont {
    position:absolute;
    top:0;
    left:0;
    z-index:70;
    overflow:auto;
    }
    .box {
    margin: 0 auto;
    padding: 50px;
    }
    body {
    }
    .floatLeft {
    float: left;
    }
    .floatRight {
    float: right;
    }
    .clear {
    clear: both;
    }
    a {
    outline: none;
    }
    img, a img {
    border: none;
    }
    h1 {
    font-weight: normal;
    border: none;
    }
    p {
    font-weight: normal;
    font-style: italic;
    font-size: 10px;
    color: #FFF;
    }
    #page-wrap {
    min-width: 800px;
    }
    #twitter, #flickr, #scrnshots {
    width: 25%;
    float: left;
    padding: 20px;
    min-width: 200px;
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-size: 12px;
    font-weight: normal;
    color: #666;
    }
    img.profile-pic {
    float: left;
    padding: 5px;
    }
    #flickr img, #scrnshots img, #twitter img {
    height: 100px;
    width: 100px;
    margin: 7px;
    clear: both;
    border: 3px solid white;
    }
    .tweet {
    width: 250px;
    padding: 10px;
    margin: 5px 0;
    background: url(images/transpBlack50.png);
    }
    a:link {
    color: #09F;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #C93;
    }
    a:hover {
    text-decoration: none;
    color: #06C;
    }
    a:active {
    text-decoration: none;
    color: #09F;
    }

    HTML

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Visit me on Flickr!

    Visit me on Twitter!

    Visit me on Scrnshots!



    # October 25, 2009 at 6:22 pm

    Do you mean the solid white, 3px border around the flickr, twitter and scrnshots images?

    If so, remove following rule from your CSS:
    border: 3px solid white;

    So that it looks like this:

    Code:
    #flickr img, #scrnshots img, #twitter img {
    height: 100px;
    width: 100px;
    margin: 7px;
    clear: both;
    }
    # October 25, 2009 at 11:02 pm

    some browsers will default an image to have a border (I’ve run into it before) you may want to change that to border: none; instead of removing the border declaration altogether.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

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