IE8 blurs zoomed in picture

S

Skybuck Flying

http://www.skybuck.org/BoxifyMe/

At the bottom of the page the images are zoomed in... but IE8 pretty much
screws up badly and blurs the whole fricking thing ?!

Not good ?!

Is there a way to get rid of the blur ?!? (Without having to make new zoomed
in pictures... ?)

Bye,
Skybuck.
 
S

Stanimir Stamenkov

Sun, 12 Dec 2010 09:57:19 +0100, /Skybuck Flying/:
http://www.skybuck.org/BoxifyMe/

At the bottom of the page the images are zoomed in... but IE8 pretty much
screws up badly and blurs the whole fricking thing ?!

Not good ?!

Is there a way to get rid of the blur ?!? (Without having to make new zoomed
in pictures... ?)
Click to expand...

Mozilla implements an 'image-rendering' [1] CSS property which
appears to be originally a SVG property [2] and not defined in any
current CSS standard. The Mozilla docs also point out an IE
specific property '-ms-interpolation-mode' [3] which default value
seems changed between IE7 and IE8.

So I guess you could to add to your style sheet:

#AutoNumber1 img {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}

[1] https://developer.mozilla.org/en/CSS/image-rendering
[2] http://www.w3.org/TR/SVG/painting.html#ImageRenderingProperty
[3] http://msdn.microsoft.com/en-us/library/ff521095(VS.85).aspx
 
S

Skybuck Flying

Stanimir Stamenkov said:
Sun, 12 Dec 2010 09:57:19 +0100, /Skybuck Flying/:
http://www.skybuck.org/BoxifyMe/

At the bottom of the page the images are zoomed in... but IE8 pretty much
screws up badly and blurs the whole fricking thing ?!

Not good ?!

Is there a way to get rid of the blur ?!? (Without having to make new
zoomed
in pictures... ?)
Click to expand...

Mozilla implements an 'image-rendering' [1] CSS property which
appears to be originally a SVG property [2] and not defined in any
current CSS standard. The Mozilla docs also point out an IE
specific property '-ms-interpolation-mode' [3] which default value
seems changed between IE7 and IE8.

So I guess you could to add to your style sheet:

#AutoNumber1 img {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}

[1] https://developer.mozilla.org/en/CSS/image-rendering
[2] http://www.w3.org/TR/SVG/painting.html#ImageRenderingProperty
[3] http://msdn.microsoft.com/en-us/library/ff521095(VS.85).aspx
Click to expand...

Much thanks !

It looks much better now ! ;) :)

Bye,
Skybuck =D
 
S

Skybuck Flying

Stanimir Stamenkov said:
Sun, 12 Dec 2010 09:57:19 +0100, /Skybuck Flying/:
http://www.skybuck.org/BoxifyMe/

At the bottom of the page the images are zoomed in... but IE8 pretty much
screws up badly and blurs the whole fricking thing ?!

Not good ?!

Is there a way to get rid of the blur ?!? (Without having to make new
zoomed
in pictures... ?)
Click to expand...

Mozilla implements an 'image-rendering' [1] CSS property which
appears to be originally a SVG property [2] and not defined in any
current CSS standard. The Mozilla docs also point out an IE
specific property '-ms-interpolation-mode' [3] which default value
seems changed between IE7 and IE8.

So I guess you could to add to your style sheet:

#AutoNumber1 img {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}

[1] https://developer.mozilla.org/en/CSS/image-rendering
[2] http://www.w3.org/TR/SVG/painting.html#ImageRenderingProperty
[3] http://msdn.microsoft.com/en-us/library/ff521095(VS.85).aspx
Click to expand...

Yeah... I forgot to mention this link which explains how to embed it:

http://msdn.microsoft.com/en-us/library/ms530822(v=vs.85).aspx

I shall copy the little code section and paste it here for future reference
just in case the webpage goes down ;) :) Might come in handy some day when
searching with gooooooogle ;) :)

<html>
<head>
<style>
img.highqual { -ms-interpolation-mode:bicubic }
img.nearestn { -ms-interpolation-mode:nearest-neighbor }
</style>
</head>
<body>
<img src="sphere.jpg" width="175" height="350" class="nearestn">
<img src="sphere.jpg" width="175" height="350">
<img src="sphere.jpg" width="175" height="350" class="highqual">
<p>Change the zoom level of the page to see the difference.</p>
</body>
</html>

(class can be changed in front page editor too... nice ! ;) :))

I also learned something today... IE8 has a little zoom things in the down
right corner... I probably already noticed that before but didn't know how
handy it could be ;) :) so I probably forgot about it... but now I will
remember I think ! ;) :)

Bye,
Skybuck :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

IE doesn't show picture in the middle 21
Navigation Menu in IE8 2
Windows 7 VirtualDiskProblem screenshot 4
jQuery + IE8--told you so 47
code not working in IE6 and IE8 3
another IE8, firefox markup problem 3
problem including picture in email! 1
Background changes to blue color when a popup is moved across in IE8 9

Members online

Total: 37 (members: 1, guests: 36)
Robots: 307

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,007
Latest member
obedient dusk

Latest Threads

Top