Gif vrs. png, text issues

[Timothy]

Good day. I'm really having issues with graphics today. The goal is to
have a web banner that is transparent, that shows the web page background.
This issues that I've found is that IE will not support the transparent
..png file correctly and creates a white background that looks really bad.
I re-created the banner in .gif format, but the text comes out badly and
the over all look is poor. I have a real need to have the banner look nice
with the text, and for it to be IE display it correctly. Examples can be
found on the page, address below in sig.
Thanks for the help.

 

[paul]

Good day. I'm really having issues with graphics today. The goal is to
have a web banner that is transparent, that shows the web page background.
This issues that I've found is that IE will not support the transparent
.png file correctly and creates a white background that looks really bad.
I re-created the banner in .gif format, but the text comes out badly and
the over all look is poor. I have a real need to have the banner look nice
with the text, and for it to be IE display it correctly. Examples can be
found on the page, address below in sig.
Thanks for the help.

You'll need to flatten the text layer over a similar colored green
background (can't have that white) & leave a transition area to soften
the jaggies.

PS that background image didn't load until quite a while later so use
that same green as a background color also even after compressing the
image heavily to load quicker.

 

[Al Jones]

Good day. I'm really having issues with graphics today. The goal is to
have a web banner that is transparent, that shows the web page
background.
This issues that I've found is that IE will not support the transparent
.png file correctly and creates a white background that looks really bad.
I re-created the banner in .gif format, but the text comes out badly and
the over all look is poor. I have a real need to have the banner look
nice
with the text, and for it to be IE display it correctly. Examples can be
found on the page, address below in sig.
Thanks for the help.

Also check the text in your boxes closer ... you have several missing
words, missed plurals / posessives, etc....

eg. 'Yard Works Gardening Co. offer weekly mowing schedules and also offer
a' ... you're speaking about the company.. singular, so 'offer' in both
cases should be 'offers'

'with the health of as the prime objective' -> 'health of the *tree?* as
the prime objective'

also, your menu's broke on ../resources.html (presume you knew that).

Other than the banner, which is what you're working on, and the slow load
of the image your site looks sharp.

 

[Timothy]

Also check the text in your boxes closer ... you have several missing
words, missed plurals / posessives, etc....

eg. 'Yard Works Gardening Co. offer weekly mowing schedules and also offer
a' ... you're speaking about the company.. singular, so 'offer' in both
cases should be 'offers'

'with the health of as the prime objective' -> 'health of the *tree?* as
the prime objective'

also, your menu's broke on ../resources.html (presume you knew that).

Other than the banner, which is what you're working on, and the slow load
of the image your site looks sharp.

The text in the boxes is not the final text. I just needed to have filler
text that was close to the final text. My wife will clear the text issues
latter tonight. She way better at that stuff than I.

The resources.html works locally for me. Unsure what the problem is with
that. Do you get a 404 error.. or?

Thanks for looking at the page and giving me feedback.

 

[Timothy]

You'll need to flatten the text layer over a similar colored green
background (can't have that white) & leave a transition area to soften the
jaggies.

PS that background image didn't load until quite a while later so use that
same green as a background color also even after compressing the image
heavily to load quicker.

Thanks for your input. You have helped greatly.
I've played with the background a bit and lowered the leaf to give the
banner more space. I'll just make the banner a .png and not stress about
IE. The banner no longer will over lap the green areas of the background.

I also gave the body css a green background, hopefully this will help
with the whiteness of the page untill the background loads.

I also compressed the background image to 97.6 kB. This will hopefully
help the load times. The site is hosted on my own box with 30 KBs up
speed. I understand that this is barebones for serving, but it's a small
compainy and my area I'm serving for is small also. Besides... the 56K'ers
will never notice the difference..lol

Thanks for the tips and your time.

 

[Steve Pugh]

I also compressed the background image to 97.6 kB.

Nearly 100kb for one image? You should be aiming to have your whole
home page be smaller than 100kb.

Steve

 

[Al Jones]

The text in the boxes is not the final text. I just needed to have filler
text that was close to the final text. My wife will clear the text issues
latter tonight. She way better at that stuff than I.

The resources.html works locally for me. Unsure what the problem is with
that. Do you get a 404 error.. or?

Thanks for looking at the page and giving me feedback.

I was hoping that you wouldn't be insulted since this isn't
alt.html.critique' I'm looking at it on a narrow screen ... the word
'area' appears below the word 'resource' in a second box. (why'd you
change it from resource as on the other screens, btw, trying to confuse
me??) I think that if you were to move your borders in you'd probably see
what I'm talking about.
Nope, that doesn't change it ... I'm running Opera with my display set at
1280 x 1024 and just took it full screen ... the word area still appears
below the word recources. (Same thing on IE 6 at full screen... and not
to be out done, same thing on Mozilla FireFox)

And for what it's worth, *I* like the white background above the leaf,
behind the text ....

 

[Timothy]

Nearly 100kb for one image? You should be aiming to have your whole home
page be smaller than 100kb.

Steve

Thanks for the reply Steve. I went to:
http://www.websiteoptimization.com/services/analyze/
and ran the test...WoW. If was a lot bigger than I thought. I've
compressed all the images as small as I could with out loosing too much
quality and I'm still at 113502 bytes. I don't think that I can compress
any more with out loosing the graphics quality..?

Thanks for pointing out the size issue, that's helped a lot.

 

[Mitja]

This issues that I've found is that IE will not support the transparent
.png file correctly and creates a white background that looks really bad.
I re-created the banner in .gif format, but the text comes out badly and
the over all look is poor. I have a real need to have the banner look
nice with the text, and for it to be IE display it correctly.

You can
- leave it all as it is, losing the need for transparency
- use a gif which is antialiased with a pale background color, so the
transparency area edges won't look jagged
- use a png and google for ie png alpha transparency filter

HTH

 

[paul]

You can
- leave it all as it is, losing the need for transparency
- use a gif which is antialiased with a pale background color, so the
transparency area edges won't look jagged

Actually now you can just use an opaque white background GIF since it
doesn't overlap the green. The vast majority of viewers will see the
jaggy version in IE.

I don't know why but the title image displays larger in IE than Mozilla.

 

[Mitja]

Actually now you can just use an opaque white background GIF since it
doesn't overlap the green. The vast majority of viewers will see the
jaggy version in IE.

That's right. I assumed OP had enough common sense not to use transparency
when it is not needed at all and that he actually does want the banner and
bg image to overlap in the final version of his page - hence my response.