I wrote my code to work in Firefox then made some minor tweaks for IE7 and was happy with the results. Then I went to IE6....... you know the story. I was using a css layout called Even More Rounded Corners which uses png's for the images. So this really messed up in IE6. I went and found IE PNG Alpha Fix v2.0 Alpha 2 which sort of works. I am getting transparency from the pngs but it tweaks the layout. I have tried everything I can think of but can't seem to make it work. I will link to all the files and maybe someone has some ideas. Site: http://www.mmbcpas.com/home/index.html CSS for Firefox and IE7: http://www.mmbcpas.com/home/css/1.css CSS for Even More Rounded Corners: http://www.mmbcpas.com/home/css/dialog.css These are the css files that are called for IE6 with conditional comments: CSS for IE6: http://www.mmbcpas.com/home/css/ie6.css CSS for IE6 Even More Rounded Corners: http://www.mmbcpas.com/home/css/rounded.css Maybe some one can poke around and give me some ideas.
Bah-- even though it doesn't look as beautiful, lose the png's for IE6 and give it some transparent gif's instead. something like /*modern browsers get the png*/ #element { background: url(awesometransparency.png) 0 0 no-repeat; } /*IE6 and below gets the crappy, but workable, gifs*/ * html #element { background: url(shittytransparency.gif) 0 0 no-repeat; } Make a gif version of your png's, and lose the 10 pounds of scripting you're struggling with to get IE6 to work like a modern browser. It's just not worth it. The little bit of jaggies you might see with IE6 is a better solution than PNGFIX.js For less jaggies, try setting a matte (use the light green as a background, make your corners, then cut them out-- so the edges have a bit of green on them).
Like I said, it's not so bad in IE6, just usually a bit jaggy. If your background didn't move, you could've used non-transparency images instead : ( There are other solutions... deathshadow has a HTML-only non-image rounded corner solution, but depending on the browser they can look a bit pixellated compared to png images... http://battletech.hopto.org/html_tutorials/rounded_css_borders/ I wouldn't add that markup JUST for IE6, though.
Why do that when you can use a gif without the code and it will look good in all browsers. Don't use PNGs.
Now I just can't get the layout to work in IE6. I really don't want to have to rewrite the the entire layout for the site so if anyone can see how to fix the IE6 problem please let me know.
Simply because PNGs look a bit better. While gifs can have transparency, it's kinda treated like a colour-- and each pixel gets only one colour. With PNGs it's transparency seperate from colour (called the alpha channel) so you can has a colour AND a level (from 0-100) of transparency. So, when you need an edge to look smooth and transparent, in a gif you get either the colour or nothing (transparency) but in a PNG you can have a colour fade off into transparency. Although you're right most of the time one doesn't even notice, esp if the background doesn't move-- then you can use a matte background on the gif, then remove the extra colours and replace with transparency, and it looks the same. Sometimes it matters though-- and sometimes you want transparency on something with more than 255 colours. Like, looking as nice as a 16billion colour jpg but with transparency (which jpg of course doesn't support). PNG is still lossless though, so while it can do the 16 billion colour thing, it comes at the price of a huge file. So everything's a tradeoff-- how nice does the image have to look, and how much time do you want your visitors sitting and loading the page? West4me: unfortunately you have so many different stylesheets-- you should be able to get away with a single stylesheet, for all browsers, with a little hack here and there for IE6. It looks like your scripty CSS already did what I said: background:transparent url(../images/dialog2-blue-800x1600.png) no-repeat top right; _background-image:url(../images/dialog2-blue.gif); Code (markup): IE6 will accept the _ before the property, and since it comes afterwards it overrides the earlier declaration. Not quite as safe as the Holly hack but it's fewer lines of code. The problem seems to be with the positioning-- the widths of things are so out of whack, I wouldn't know where to start. Instead I'd have to start over from scratch, because my poor IE64Linux can't even deal with a mouse move without the whole page trying to re-jigger it's layout and rendering. Meaning every time I even breathe on that page everything vanishes. Maybe it's the scripting. If I had to write this page, I'd almost be tempted to use CSS opacity here, with full images of the sidebars (since they don't generally change height) and some other trick for the main chunk. It would eliminate PNGfix, all scripts regarding this, because it would be purely image based and again IE6 would get the gifs instead. You could even fake the semi-transparency by setting a fixed width of the page just for IE6 (so they get a scrollbar if they go under that size) so the stripes don't move around in IE6. Then you can use images which look like the stripes are showing through even. But I don't think I can figure out what exactly is going wrong on this page the way it is-- there's lots of code, prolly too much.
Thank you for taking the time to look at it. As you can tell I am not exactly a coder. I am just trying to help out my wife with this site. I guess I need to go back and start over trying to slim it down. The only reason I saw that there might be a problem with the fixed gif sidebars was for fluidity. I'm learning a lot though.
You can copy your css file and make a version for IE6 than include it with conditional comments ... http://www.vision.to/conditional-internet-explorer-comments.php be sure to include it after the first css file (original) in order to override all values or your ie6 css file should include only parts where images are used ...
That's not... entirely accurate. When you are treating a single colour as transparancy, it's called 'palettized transparancy' - and .png can do that too. If you use palette transparancy it works in every browser, even IE, even as .png I advise AGAINST using 'alpha transparancy' where you have multiple levels of what is transparent for a whole host of reasons - topping the list for me is NOT that it doesn't work in IE6/earlier (though that's a good reason) or that the IE6 'fix' doesn't tend to work right if you are putting it as a background - nope, that's not it. I dislike it because the file sizes are fat and bloated, and there's RARELY anything you can do with transparancy that cannot be done by simple pre-compositing your elements. (lining up vertical stripes on a dynamic horizontal sections is about it for things you can't do) - Usually it's just another sleazy shortcut that chews bandwidth for no good reason.
Yeah, you're right, I should have made clear the difference between 8-bit png's and the ones with alpha channels-- but at that point, I'm not sure what the advantage is over gif other than maybe the better compression? The only reasons I use png's is either when I need lossless (for saving the original of an image no matter how much I play with it) format with a bazillion colours or when I need the alpha-kewlness factor. Which is generally when stuff needs to be a bit see-through while the backgrounds or the elements move around.
GIF gives better compression if there are less than 16k in pixels total at 16 colors or less. It also has the advantage the same 'gamma' is applied to it in IE that is applied to .jpg and all css/html colors. PNG tends to deliver smaller filesizes than GIF when there are more than 16k pixels at higher color depths - but has the problem that IE does not apply the same gamma to it, meaning 'color matching' PNG to CSS like border or background-color is impossible unless it's pure black or pure white. It's another of the things that showed M$ just really hates png