Crossbrowser HELL. Plea for fix!

[stanb17]

When I first started developing the issues of cross-browser compatibility almost sent me running for the Valium. Then Firefox came along and things were happy again. Even though FF now has 47% of the world's eyes using it, MSIE still does not play well with PNG's and certain types of CSS.
Case and point...

http://thewordoflight.org/index.php

Looks great in FF... dog poop in MSIE. Can anyone offer up a simple fix for this? If not simple, what will it take to make the "bad" go away?

Thanks

Stan

[Jeff]

What exactly is your problem with IE? Be specific or take a screenshot and circle the problem in Paint.

[jmcgin51]

I checked out the site.  He's right - in FF it looks fine.  In IE (6), it's unusable.  (if he tried to circle the problem, he'd have a circle around the entire page).

I'm no CSS guru, but it almost seems like some of the stylesheets are not even being interpreted by IE.

[stanb17]

Thanks. Where do I start? The layout is blown to crap. I suspect it's MSIE's lack of support for PNG graphics. Aside from that, the navigation is none functional in MSIE.

I've attached a screen cap from FF and MSIE. Frightening to look at.

[Jeff]

ok, you are using IE6, correct? I am using IE7 and don't have those problems.

If it is an issue with PNG can you convert them to gifs or jpgs?

Also what is percent of people using IE6 still? I am getting to the point of not supporting it on my website because most using IE should have switched to IE7.

I will look into this more this weekend. 

[stanb17]

ajprog,

Thanks. I've converted PNG to GIF to fix issues with MSIE before. That's less worrisome than the fact that the navigation is hosed. Any help is greatly appreciated. I'm reasonably certain that the trick is in the CSS. I'm attaching that here.

I'll work on the graphics tomorrow.

Thanks again.

SB

[Jeff]

The new 1.6 does some fancier CSS stuff like you do, I will check it this weekend when I have access to a machine with IE6 on it.

[stanb17]

Thank you X3. I hope I can buy time with the client by working on the graphics today. It's not just him. He reports to a board of directors.
Thanks for looking into it.

SB

[Dr.CSS]

That menu will never work in IE6 as it is and the thing we use to make them work in IE6 won't make it work either...

If you make the menu template use and then use the JS for ie6 and change all your css calls to use #primary-nav it may help...

Where did you get this template? it has Created by Artisteer v2.0.2.15338 in it and I thought they was the be all to end all...

[stanb17]

Mark

Nice to hear from yo90u again. I discovered a call in the template that was pointing to files that did not exist.

    {literal}
       
   
   
{/literal}

I found the two CSS's on my local machine (where they did little good)... and loaded them up to the right DIR. NOW I have things rendering better in IE6.

One more hurdle. is the body background. It renders fine in FF, but because it is a PNG with an opacity setting, it fails in IE6. I tried loading GIF's and changing the calls in the CSS to point to the GIF's, but this trashed the look in FF. Since IE6 only has 14% of the market... but required 80% of my time to get things to work... eh... you chare my frustration. I read your page.


SOOOOOO My question is... what can I use as a fix for the body background that will not end up trashing the look in FF?

Thanks Mark. You're a great help.

Stan

[Dr.CSS]

You have problems with other than ie6 browsers because you just put the gif call in for all browsers try using the following link to see about just targeting ie6...

http://forum.cmsmadesimple.org/index.ph ... 755.0.html

[jezatron]

hey im guessing this is still unsolved currently. you can get around the fact that old i.e. versions are ignorant to the translucency of a png by using a css hack for the same area rather than tiling a png of opaque shading.

e.g assuming you wanted a 70% shade of black as a bg color

.yourClassName {
background-color:rgb(0,0,0);
opacity:0.7;
-moz-opacity:0.7;
filter:alpha(opacity=70);
}

I've had to work round the same prob myself in the past and have found this works.

[jezatron]

ps ^^ negates need for individual browser specific solutions