Image not displaying properly(compressing) in responsive web design page in IE7

Hello all,

The site in question: Classic Car Gallery

I’ve designed a coming soon responsive web page. The page appears to load, display and scale quite nicely in ie8 and ie9. In ie7 the page seems to load but then the bottom image: “Coming Soon…” compresses vertically and distorts the type.

I have tried various solutions, but am at a loss. What am I missing? Any help, ideas, guidance, and/or code snippets would be much appreciated.

Thanx again,
PChuprina

I really do have to say that for two static image files…

WHAT IS ALL THAT SCRIPTING FOR?!?

Congratulations, you have a 494k PLACEHOLDER filled with scripting for… well, I don’t know why.

Probably goes hand in hand with the endless IE conditionals for nothing on a page that doesn’t need ANY of that… and the HTML 5 lip service before it’s ready (NOT that there is ANY reason to adopt ANYTHING from HTML 5 in terms of markup) and the associated “modernizr” bull.

My advice? Axe ALL the pointless/wasteful scripting (hey, is that supposed to fade in? Because it doesn’t!), pre-composite your images to get the filesizes under control,

I’d even axe the analytics bull - but that’s because apart from wasting bandwidth it does nothing you can’t likely pull from the server logs using analog or webalizer.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="robots"
	content="NOINDEX, NOFOLLOW"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<link
	rel="shortcut icon"
	href="/favicon.png"
/>

<link
	rel="shortcut icon"
	href="/favicon.ico"
/>

<link
	rel="apple-touch-icon"
	href="/apple-touch-icon.png"
/>

<title>
	Classic Car Gallery
</title>

</head><body>

<div><!-- lip service for block level container -->
	<img
		src="img/classic_car.png"
		alt="Classic Car Gallery"
		class="classic_logo"
	/>
	<img
		src="img/coming_soon.png"
		alt="Coming Soon"
		class="coming_soon"
	/>
</div>

</body></html>

Gimme about two minutes and I’ll toss together pre-composited images and CSS for that. Alpha .png is for people who don’t understand how to use images properly. :smiley:

… and here it is:
Classic Car Gallery

as with all my examples the directory is unlocked:

Index of /for_others/PChuprina

For east access to it’s bits and pieces. Tested working perfect all the way back to IE 5.01… and takes it from the HALF A MEGABYTE of your original, down to 43k.

Little tip, when you have 230k of images, you’re not designing for the web. When you have more scripts than you do images – to the tune of 253k – something is HORRENDOUSLY WRONG.