Quick question css pro's n guru's

Ok I am new to css but understand what I am doing so far but I am now just wondering if I can set a percent such as 99.6% for the width of my div? If so will it look different in different browsers?

That’s all I was wondering.

Also I am still running IE6 and my pings don’t work I get a white BG. I know there is a fix for it on google but I am wondering do a lot of people still use IE6? If so should I use the fix I found on google or am I safe just leaving my code the way it is and upgrade my IE broser to IE7?

[Non-expert view:]
It’s fairly safe, although different browsers may behave slightly differently in deciding how many pixels that actually represents. When it represents fractions of pixels (which will be most of the time) some browsers may round up and others down, so the results won’t be exactly the same, I wouldn’t think.

Hey Ralph thanks for the quick reply. What about IE6? Do you think many people out there still stuck on IE6?

Ah, OK, you must have added that while I was replying. There are stats on how many people still use IE6. I ignore it altogether now, but some people can’t afford to. I don’t know what you mean about pings not working.

Ok well I am using a transparent ping and IE6 doesnt support transparent ping images. There is a fix for it I guess I am just going to use the fix. Thanks for the quick replies Ralph. have a great night. Vinny

O, I had no idea you were talking about PNG images. (Pronouncing it as “ping” is one thing, but … :p)

You do need one of the many fixes for IE6 if you are using a transparent .png. Or you could just serve up a non-transparent image for IE6, which is my preference. As far as I’m concerned, IE9 sounded the final death knell for IE6 … even though those on XP can’t use IE9. They can at least use IE7 in most cases.

(Pronouncing it as “ping” is one thing, but … )

I’m prolly the only person in the whole world who calls them Pee en Gee’s :slight_smile: “Ping” to me means when you ping a server.

They can at least use IE7 in most cases.

Tell that to my bank : )

Also I am still running IE6 and my pings don’t work I get a white BG. I know there is a fix for it on google but I am wondering do a lot of people still use IE6? If so should I use the fix I found on google or am I safe just leaving my code the way it is and upgrade my IE broser to IE7?

Before bloating up your page with a bunch of java-junk: see what you can get away with first.

  1. Do you really need semi-transparency? If the background is a solid colour, you really don’t. You can see if saving the image with the background you expect to show up behind it, as a flat, 8-bit PNG (those are way smaller… see how many times larger a PNG gets once you add alpha transparency?)

  2. Sometimes it’s ok for IE6 users to see a solid colour when everyone else gets nice semi-trans. So see if a particular solid colour is nicest.
    I dunno if this works for ALL image editors, but here’s what I do:
    when I go to save my semi-trans PNG in the GIMP, you know where the foreground/background colours are in your panel? I set the background colour to the colour that’s behind the image on the web site.
    When you save the image, the background is recorded in the encoding (even tho with alpha-trans, you won’t see it in modern browsers) and IE6 should show that colour instead of white, or grey, or black (I think people see those colours because those are common default backgrounds).

  3. If the background behind the image isn’t a solid colour, consider sending IE6 a flat 8-bit (indexed) PNG. This means, IE6 users will see somewhat jagged edges, but if you’re even wondering if you care about IE6 then this shouldn’t be a show-stopper. CSS:

#element {
background: url(somealphaimg.png) 0 0 no-repeat;

  • html #element{background-image: url(someflatpng.png);}

(or use IE Conditional Comments, whatever)

Lastly, if you DO still decide to try stuff like the PNG fix, check that if you are putting these semi-trans images on clickable things (buttons/links) that they work in IE6. Some of these fixes screw with the ability to click. For that twinhelix fix, setting position: relative on those elements did the trick, but I dunno what the fix would be (if any) for other PNG fixes.

I really would do this last, because you’re
-making server requests and browser loads for larger images
-making IE6 users load some silly ginormous Javascript just to make things look pretty

This is especially relevant if possibly users with WindowsMobile will be accessing your site. IE6 is the default browser on those things for some reason (if they’re smart, they downloaded Opera mini or something… but you never know). So now consider the bandwidth and page load speed matters more on mobiles.

Hope you get things working the way you want either way


No, there are at least two of us. :slight_smile:

I had to laugh the other day at the news that there was a huge debate in Australian government circles over the use of PNG.

They were talking about Papua New Guinea, though (and arguing about using it to accommodate asylum seekers).[/ot]

well I use css to make my bg fade from top to bottom. So Using a solid BG on my .png image would be out of the question and so far I have no java in my script. I found some resources on the net where I can use a 1 pixel by 1 pixel clear .gif and then with some css I can get my transparent .png’s to work. Only thing is I am using relevant positioning and all of my navigation icons are the same type of image .png with transparent bg’s so I am afraid the script might make the clickable icons I made not work.

The Sitepoint reference explains how to use the alpha image loader to render transparent png images for IE6. No script is necessary and if you avoid placing the filter on positioned elements then the link problem does not occur. Sometimes this means adding an extra intermediate element just to hold the filter but is a full-proof method.

If you have a solid color for the background, you could have a non-transparent image whose gradient ends in the same color as the background.