homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Mozilla makes images fuzzy
But cure found!
Hester




msg:612439
 12:47 am on Mar 7, 2004 (gmt 0)

This one is crazy. I've been applying a background image to a page using stripes. Each stripe is 3 pixels deep. There are two alternating colours. The image is applied horizontally only, and repeated.

I noticed that the lines were blurred in Mozilla. Yet in Opera and IE they were pin sharp! I took a screenshot but the effect could not be seen in the screenshot.

I even turned off ClearType font smoothing in Windows. Then I tried saving my striped image in a variety of formats, namely jpg and gif, trying out all the save options possible.

Eventually I solved the problem. I had noticed the lines were pin sharp in another image I had positioned over the background, but with the lines at a different place. So here is the solution I made:

html {margin-top:1px;}

This forces Mozilla to move the image down by just 1 pixel, curing the strange fuzzying effect!

Of course I have a layout that this doesn't matter in. I could have just edited the background image, but it has to line up with another image I'm using. (I think I'll redo both images though. Sigh.)

Has anyone else come across this one? If not I'd better file it on Bugzilla!

 

Hester




msg:612440
 12:53 am on Mar 7, 2004 (gmt 0)

Aaagh! I redid the image to be 1px taller. Now the fuzziness appears in Opera and IE! Clearly it's a Windows problem. I'm on XP SP1.

How are designers supposed to work with crazy effects like these happening? (And no I haven't been drinking! :))

[Update: I see that moving the browser window up or down slightly causes the effect to appear and disappear. Most odd. So now it definitely affects all browsers. I'll try and get it not to happen when the browsers are maximised.]

tedster




msg:612441
 2:58 am on Mar 7, 2004 (gmt 0)

This might also be an issue with your graphics card, Hester -- can you check it on other computers?

Designers quickly discover the limits of the online medium, and there are many. It just ain't print, and print has its own limitations. And have you noticed the problems with normal definition TV graphics?

[edited by: tedster at 10:42 pm (utc) on Mar. 7, 2004]

webjefe




msg:612442
 7:06 am on Mar 7, 2004 (gmt 0)

Are you using the web-safe palette for your colors?

Is your display setting set for 256 colors, High Color (16-bit, thousands of colors), or True Color (24-bit and 32-bit, millions of colors)? Only True Color can display all 16.7 million colors without dithering or color shifting.

Also, I believe that less than 60 percent of web users currently are using True Color. So designing your page for the other 40+ percent is important.

choster




msg:612443
 9:13 am on Mar 7, 2004 (gmt 0)

Gecko has some known issues with rounding at very small units (e.g. 1px):

[positioniseverything.net...]

Hester




msg:612444
 8:32 pm on Mar 7, 2004 (gmt 0)

I think it could be my TFT monitor. I read that when the digital lead is used, you don't quite get all 16 million colours.

The stripes can't be saved in a web-safe palette because they fade away gradually, so many colours are needed.

I wish I could point you to a test-case, but links like that aren't allowed!

I will try and check it on a CRT monitor to see if the same effect occurs.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved