Please fix the gradient on this site...

[Forboding Angel]

Clipboard01.jpg (2.92 KiB) Viewed 1174 times

The gradient is fine, but someone put a height in the css for the background image. That height value is incorrect, which is why you can see a crappy gradient instead of a smooth one (the image is getting crunched vertically).

For a perfect example, right click on the background and choose "View Background Image". You will notice that the image is actually longer than it is on this page. That means that it is being limited via the css (or html).

So, would someone with server access please fix it?

[Caydr]

Let's say you've got a CRT or an IPS/VA, even then there are only 256 different luminance graduations in the 8-bit gamut. It'll look the same no matter how it's sized unless it's only 256 pixels tall. And that would be if they had the top at #ffffff and the bottom at #000000, which obviously they don't.

I'm oversimplifying, they might use dithering or something but it will make no practical difference since the TN panel you're viewing the page with can only display a fairly small variety of gray-blue shades, so it doesn't matter how it's sized or positioned, it will still look like shite.

I believe the most noticeable thing is that the background doesn't appear to match the lowest shade on the gradient, it actually seems to be a bit brighter. Might just be my eyes playing tricks on me.

[very_bad_soldier]

The gradient is fine, but someone put a height in the css for the background image. That height value is incorrect, which is why you can see a crappy gradient instead of a smooth one (the image is getting crunched vertically).

I believe it is not possible to specify image height for a background image in css. But I dont know whats causing it either.

[SpliFF]

Correct, until CSS3 comes along you can't scale a CSS background. If its container is too small it will just crop. Scaling artifacts must therefore be in your hardware, your eyes, or your brain!

[imbaczek]

ctrl+mousewheel scales the background, yes.

[Forboding Angel]

Edit: This post is useless at this point, read further.

[Forboding Angel]

My original assumption was wrong though... I had assumed someone had defined the background via html instead of css (assumed before going to the trouble of reading the code).

[Forboding Angel]

Wow, this site looks abysmal in IE...



Quick note for the future... Maybe next time you guys should listened to AF and I.

[SpliFF]

As any web developer will tell you, EVERYTHING looks bad in IE.

For starters the PNG bottom color matches the site background color precisely which means the color differential you're seeing is in fact due to IE completely ignoring or fucking up the image color profile. Not surprising really when you consider it took Microsoft nearly 10 years to get PNG transparency working.

handles PNGs with gAMA chunks differently (inconsistently) from HTML and CSS colors, from unlabelled images (GIFs or PNGs), and from PNGs with sRGB chunks (see 7.0b1 screenshots)--apparently uses display-system gamma of approximately 1.93 instead of 2.2 (i.e., colors appear slightly dark)

-- http://www.libpng.org/pub/png/pngapbr.h ... e-win-unix

If they had their way the whole internet would be made up of BMP's.

Basically the issue is still your setup. Get a better browser that follows the HTML/CSS standard (pretty much anything BUT IE) or stop bitching.

And yeah, the gradient could probably do with a little blur but I don't really think the banding is that noticeable, certainly not a hanging offense. Personally I'm not a big fan of gradients, especially since the majority of consumer LCDs have very limited color range (early models supported around 12,000 colors compared to the millions support by CRTs).

[Forboding Angel]

Edited most of the meat out of this, there isn't much point in my yelling at spliff for not paying attention to the obvious (leaving this last part in tho):
STANDARDS, you want to talk to me about STANDARDS?!?!!?
Errors found while checking this document as XHTML 1.0 Transitional!
Result: 142 Errors, 3 warning(s)

142 w3c executives had a heart attack while viewing this message and 3more had to have emergency bypass.

[Forboding Angel]

Edit3: Lets make this easy. Fix included.

background.png

(3.1 KiB) Downloaded 15 times

It's only 2kb larger than the original.

[SpliFF]

Well I probably shouldn't have said you were bitching, but it comes across that way.

You're talking about maybe 5kb or less of excess image and that has nothing at all to do with the banding/terracing you're seeing.

The banding is just poor dithering in the image, which is more noticeable when the image is being tiled.

You seemed to be implying earlier the image was being crushed, it isn't.

View Image doesn't always show the full image, it can be scaled by the browser to fit in the window.

This whole problem really just boils down to the PNG having banding, it isn't a HTML/CSS issue at all.

You started the thread with "the gradient is fine". It isn't. I corrected you and explained why IE showed such an obvious border between the image bottom and the background color. All the color issues except the banding are related to the color profile.

The gradient just needs a little blur, and the color profile stripped for the IE wieners, that's all.

[Forboding Angel]

The banding is just poor dithering in the image, which is more noticeable when the image is being tiled.

Entirely possible, but tiling the image in photoshop didn't produce banding.

Edit: checked again, and saw it for myself... there is banding in the image, my eyes are getting tired from looking at this crap, and I didn't catch it the first time.

View Image doesn't always show the full image, it can be scaled by the browser to fit in the window.

Oh, really?

This whole problem really just boils down to the PNG having banding, it isn't a HTML/CSS issue at all.

Possible, however, it's a very noob webdev mistake, but after looking at the source and seeing tables, I suppose I shouldn't be particularly surprised...

You started the thread with "the gradient is fine". It isn't. I corrected you and explained why IE showed such an obvious border between the image bottom and the background color. All the color issues except the banding are related to the color profile.

The gradient just needs a little blur, and the color profile stripped for the IE wieners, that's all.

Agreed, however, you mean to tell me that I am the only one who thought to take the 3 seconds to switch from FF to open this site in IE? Oy vey.

Protip: View your websites with FF and IE. If something is messed up in IE, then you need to go find the relevant workaround for IE. Yes, it's a pain, but having your website look like dirty asshole to 80% of the people likely to be visiting it is not exactly the most sound marketing strategy.

[SpliFF]

Agreed, however, you mean to tell me that I am the only one who thought to take the 3 seconds to switch from FF to open this site in IE? Oy vey.

As I understand it many, if not most, of the Spring devs are linux users, so yeah, you probably are the only one to try.

[Caydr]

As any talentless hack web developer will tell you, EVERYTHING looks bad in IE.

No blame on Roflcopter, it's not hard to overlook something like this.

Out of curiosity, are there any other active web developers here besides me? I've been seriously considering rewriting the whole site as an act of charity but from the lack of knowledge about how simple and painless even minor site changes are, I'm worried people will resist the idea.

[SpliFF]

Screw that, I have more important things to do with my life than write two websites for every client/project - one that follows standards and one for IE. In a commercial situation the client picks up the bill but this is a free project.

People who use IE *DESERVE* broken/ugly websites because they are using a BROKEN browser. That's like driving a Kia and expecting to win at Daytona or trying to perform live on a guitar with only 1 string.

It is not, as many believe, a case of different opinions on how things should work. It is a case of clear and deliberate sabotage of open protocols by Microsoft that created this situation. There isn't even any good socially responsible reason for Microsoft to still be making a browser, since that functionality is adequately provided by free software which Microsoft is free to ship if it chose (just as Apple did with Konqueror).

I have even less sympathy for people using broken browsers and operating systems than I do for people using broken cars or guitars since they have free alternatives they can avail themselves of in 5 minutes or less if they bothered to learn.

What it boils down to is that IE users are IGNORANT and ignorance should never be pampered to. As someone pointed out recently the Internet contains almost the entire collective knowledge of mankind and all it takes is a small amount of research to learn how to access that information safely and efficiently.

When I write sites for non-commercial use I write to standards. If IE doesn't render those standards correctly then that is an issue between greedy/evil Microsoft and their ignorant/lazy users. It's not something we should be particularly concerned about.

Finally, the 80% marketshare figure quoted above is probably inaccurate, my sources tell me it's below 70% and still dropping. For tech oriented sites (and Spring Engine is tech related) the share can drop as low as 40%.

[Forboding Angel]

Spliff, your career as a web developer will be very short lived with that attitude.

People using IE don't "Deserve" to see anything broken. 100% of people using IE don't even realize that it is the worst browser in existence, but you blame them for not knowing? 90% of these people have never heard of Firefox, and jsut saw a commercial on tv for google chrome last week, but won't bother getting chrome, because IE works just fine.

[AF]

Dont say you should've listened to AF, the world will end.

My solution? JPEG JPEG JPEG JPEG JPEG JPEG JPEG JPEG =/

IE has its flaws yes, and your a fool for using it, but we shouldn't let blatant flaws show up in IE if we can help it.

Now people who use IE6.... Those poor poor souls who are stuck because or corporate egg heads, and those darned fools who stubbornly choose to stick with it