Images stretching in IE, but not in Firefox, Safari

  • Resolved David Borrink

    (@davidborrink)


    14 years, 10 months ago

    I”m working on a site, and I’m having an odd issue with images in Internet Explorer. Here’s the link.

    The two lower feature blocks have images which are looking fine in Safari and Firefox, but aren’t in Internet Explorer. But note that the upper feature block image isn’t stretched. Odd.

    Here’s my CSS for those two lower feature blocks:

    #lowerfeatureleft img, #lowerfeatureright img {
	margin-top: -47px;
	max-width: 150px;
	}

    And for the upper block:

    #topfeature img {
	margin-top: -37px;
	max-width: 300px;
	}

    The negative margins are so that the image appears to the left of the H2 header which has a big left margin to put it to the right of the image.

    I had height: auto in there, but that didn’t do any good in IE. Someone on another forum topic suggested removing that height: auto as it solved an issue for him in IE, but I had no such luck.

    I’m not versed in creating custom IE CSS listings, but I’m wondering if anyone knows of a way to force IE to behave with those bottom images?

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter David Borrink

    (@davidborrink)

    And if it helps, here’s the css for the top feature item div, the divider div, and the two lower feature divs. These all float to the left of the sidebar.

    #topfeature {
	width: 640px;
	float: left;
	}

#featuredivider {
	height: 25px;
	border-bottom: 1px solid #aaaaaa;
	}	

#lowerfeatureleft {
	width: 300px;
	float: left;
	}

#lowerfeatureright {
	margin-left: 40px;
	width: 300px;
	float: left;
	}

    Thread Starter David Borrink

    (@davidborrink)

    Am I just out of luck here? In my design, I want to have the images fit a defined width, since they’ll be used in regular posts as well, and the CSS will define each instance of how the same image is displayed. Somehow, IE doesn’t want to allow the lower images to be “auto” sized and stay in proportion without being stretched.

    But why the upper feature block’s image doesn’t stretch is beyond me.

    Thread Starter David Borrink

    (@davidborrink)

    I found a solution after digging around on several Google searches, for anyone else who runs into this problem.

    My solution uses the max-height callups.

    So now my css for the lower blocks says:

    #lowerfeatureleft img, #lowerfeatureright img {
	margin-top: -47px;
	max-width: 150px;
	max-height: 100px;
	height: auto !important;
	height: 100px;
	}

    The upside is that the pictures now look normal in IE. The downside is that only horizontal images can be used since the max-width is 150. Only 4×6 proportion images can be used. That’s not really a downside because it looks better if both blocks have horizontal images.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Images stretching in IE, but not in Firefox, Safari’ is closed to new replies.