Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Images stretched in Safari and Chrome

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #32712
    virtual
    Participant

    Hi Guys,
    I am trying to use Chris’ Scrolling Sidebar – and I cannot figure out why the images in it are being stretched in Chrome and Safari. I have specified their width and height but they are still getting stretched out. I can’t figure it out.

    The site is a mess and very much under construction at http://depinhodomains.com/tt/index.html

    Any clues to what is causing this would be greatly appreciated.

    #76468
    Johnnyb
    Member

    Hey!

    This is what’s causing it:

    .widget-container img {
    margin-left: 10px;
    height: 100%;
    }

    main.css line 133. The height 100% is stretching them. Take that off and you’ll be good to go.

    John

    #76456
    grovesk
    Member

    Try

    height:auto;
    #76457
    Johnnyb
    Member

    Hey, that’s because on line 4 you also have this:

    html, body, span, h1, h2, h3, p, a, img, fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font: 100%/1.231 arial,helvetica,clean,sans-serif;
    vertical-align: baseline;
    color: black;
    height: 100%;
    }

    That height: 100% at the end is causing it.

    To test just inspect the element in chrome or firefox and click on the img in the html, then uncheck the height: 100% in the right panel and you’ll see that it fixes it.

    John

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.