PNGs not showing up correctly.

[Hound]

Hello,

I have designed a webpage that uses <div>s containing PNGs for navigation buttons.

This was done so that they could be moved easily and the background would still show through.

Anywho...

Some of the IE6 browsers are doing strange things on the PNG images... please look.


http://www.flickr.com/photos/39111115@N00/351940022/

Any suggestions

[Kenny]

Yep. Better stick with .gif until the eggheads get the .png format solved.

[Hound]

Dont know why i didnt think of that.
Thanks for banging my head for me!

[Twey]

The PNG format is fine: as usual, it's IE that's broken. PNG specifies a feature called alpha transparency, which allows one to specify the opacity (alpha) of each pixel on a given scale, much like colour. However, IE<7 don't quite know how to handle this. Thankfully, IE7 fixes this problem.

You have six options:

1. Use text, not images. It doesn't look (from those screenshots) as if you're doing anything that requires the use of images. Using text is always better, accessibility-wise. If you follow the standard and specify alternative text for your images, you're catering to people with screen-readers and other clients that don't understand images, but there's still the problem of those whose vision works, but is impaired. Such people usually enlarge text to improve readability, which can't be done with images. This is definitely the preferred option. However, it may be impossible to implement if you use effects in the image that can't be done with HTML and CSS (but, see #3).
2. Use the AlphaImageLoader CSS filter to display the images properly. Details on this filter can be found here.
3. Align your text against the background image. It looks as if you're already doing this with the circle. This is a rather risky option, since background images tend to move (unless you've fixed it to the corner, in which case it may tile, or you may have a patch of colour in the parts of the webpage that the image doesn't cover, on the browsers of clients with a window size larger than the size of the image; both are acceptable if you've designed the image to take this into account, of course). If you can safely do this, however, you've no need to worry: position your elements absolutely and make sure the background of the elements matches the background image. This can be combined with the first suggestion, if you use an image effect that affects only the background of the image: you can set the background of your elements to an image, then use text in the foreground. It is, however, impossible to do without absolute positioning, which is usually considered suboptimal (since it doesn't cater well for users of small resolutions).
4. Use GIF, and drop anti-aliasing on the text (since GIF doesn't support alpha transparency, it's impossible to anti-alias against a variable background).
5. Ignore IE<7 and carry on with PNGs. IE<7 can be assumed to be broken in this area, and with this knowledge, it's perfectly acceptable (at least in my books) to make an informed decision to completely ignore it. Backwards compatibility only goes so far.
6. Change your design.

[Hound]

Here is what is going on in the site.

I have a fixed non repeating background, and background is set to black.

Then there are the 10 (11 if you count the transparent .png that takes you home) .DIVs.

Each one of those .DIVs has something like this:

#Layer2 {
position:absolute;
left:154px;
top:271px;
width:30px;
height:15px;
z-index:2;
}

and contains a graphic of the text i.e. illustration that is just the text on a transparent bg saved out as a .png.


I learned how to do CSS last week, so I welcome help

[Twey]

and contains a graphic of the text i.e. illustration that is just the text on a transparent bg saved out as a .png.

Then there's no need to be using images at all. Use text elements instead (<li>s inside a <ul>, preferably).

[Hound]

I guess I'm worried that Century Gothic wont load on someones computer...
is that a dated practice? Can i put different fonts into a website these days?

Should i just do something like make a css for century gothic, then put a fall back as arial?

[Twey]

And a further fallback to generic sans-serif.

ul.nav-menu li {
  color: white;
  background-color: transparent;
  font-family: "Century Gothic", Arial, sans-serif;
  font-weight: bold;
}

[Hound]

so the external looks like that

ul.nav-menu li {
color: white;
background-color: transparent;
font-family: "Century Gothic", Arial, sans-serif;
font-weight: bold;
}

then my font would look like this

<li class="ul.nav-menu">text</li>

?Like i said, im just now learning this...thanks for the help!!!

[Twey]

No. ul and li are both elements; the . selector denotes a class. So, ul.nav-menu li means any <li> that is a descendant of a <ul> with class "nav-menu"; therefore, your code would look like:

<ul class="nav-menu">
  <li>graphic design</li>
  <li>photography</li>
  <!-- . . . -->
</ul>