Gif vrs. png, text issues

Discussion in 'HTML' started by Timothy, Jan 2, 2005.

  1. Timothy

    Timothy Guest

    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.

    --
    Yard Works Gardening Co.
    http://www.ywgc.com
    Timothy, Jan 2, 2005
    #1
    1. Advertising

  2. Timothy

    paul Guest

    Timothy wrote:

    > 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.
    paul, Jan 2, 2005
    #2
    1. Advertising

  3. Timothy

    Al Jones Guest

    On Sun, 02 Jan 2005 13:06:34 -0800, Timothy <>
    wrote:

    > 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.

    ---
    revolutionary e-mail client: http://www.opera.com/mail/
    Al Jones, Jan 2, 2005
    #3
  4. Timothy

    Timothy Guest

    On Sun, 02 Jan 2005 16:25:55 -0600, Al Jones wrote:

    > On Sun, 02 Jan 2005 13:06:34 -0800, Timothy <>
    > wrote:
    >
    >> 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.
    >



    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.

    --
    Yard Works Gardening Co.
    http://www.ywgc.com
    Timothy, Jan 2, 2005
    #4
  5. Timothy

    Timothy Guest

    On Sun, 02 Jan 2005 14:10:25 -0800, paul wrote:

    > Timothy wrote:
    >
    >> 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.


    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.


    --
    Yard Works Gardening Co.
    http://www.ywgc.com
    Timothy, Jan 2, 2005
    #5
  6. Timothy

    Steve Pugh Guest

    Timothy <> wrote:
    >On Sun, 02 Jan 2005 14:10:25 -0800, paul wrote:
    >
    >> 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.

    >
    >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
    Steve Pugh, Jan 2, 2005
    #6
  7. Timothy

    Al Jones Guest

    On Sun, 02 Jan 2005 14:37:31 -0800, Timothy <>
    wrote:

    > On Sun, 02 Jan 2005 16:25:55 -0600, Al Jones wrote:
    >
    >> On Sun, 02 Jan 2005 13:06:34 -0800, Timothy <>
    >> wrote:
    >>
    >>> 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.
    >>

    >
    >
    > 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 ....

    --
    Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
    Al Jones, Jan 2, 2005
    #7
  8. Timothy

    Timothy Guest

    On Sun, 02 Jan 2005 22:54:19 +0000, Steve Pugh wrote:

    > Timothy <> wrote:
    >>On Sun, 02 Jan 2005 14:10:25 -0800, paul wrote:
    >>
    >>> 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.

    >>
    >>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


    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.


    --
    Yard Works Gardening Co.
    http://www.ywgc.com
    Timothy, Jan 2, 2005
    #8
  9. Timothy

    Mitja Guest

    On Sun, 02 Jan 2005 13:06:34 -0800, Timothy <>
    wrote:

    > 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

    --
    Mitja
    Mitja, Jan 3, 2005
    #9
  10. Timothy

    paul Guest

    Mitja wrote:

    > On Sun, 02 Jan 2005 13:06:34 -0800, Timothy <>
    > wrote:
    >
    >> 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


    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.

    > - use a png and google for ie png alpha transparency filter
    >
    > HTH
    >
    paul, Jan 3, 2005
    #10
  11. Timothy

    Mitja Guest

    On Mon, 03 Jan 2005 07:32:11 -0800, paul <> wrote:


    >> - 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.


    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.

    --
    Mitja
    Mitja, Jan 3, 2005
    #11
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Richard Myers

    Drop Down List vrs Z-Order

    Richard Myers, Jul 16, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    613
    Martin Honnen
    Jul 16, 2005
  2. Toff McGowen

    ViewState vrs Datagrid Combo Boxes

    Toff McGowen, Nov 15, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    381
    Toff McGowen
    Nov 15, 2005
  3. Michael

    MySQL vrs SQLite

    Michael, May 5, 2004, in forum: Python
    Replies:
    14
    Views:
    682
    Richie Hindle
    May 7, 2004
  4. Replies:
    0
    Views:
    469
  5. Mark Probert

    backtick vrs native ruby

    Mark Probert, Feb 17, 2005, in forum: Ruby
    Replies:
    2
    Views:
    122
    Stefan Schmiedl
    Feb 18, 2005
Loading...

Share This Page