Forums

virtual

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.

Johnnyb

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

virtual

Nope, didn't work, I put that in there so it would respect the declared height of the image. Without it the image still stretches....????

grovesk

Try

height:auto;

Johnnyb

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

virtual

Hey John, good catch, it's part of my standard CSS reset, so I didn't even think of looking there and I've never had a problem with it before. You learn every day.... Thanks

treehouse : what would you like to learn today?

Forums

Images stretched in Safari and Chrome