Web Developers - CSS (Cascading Style Sheets) problem

[DreamThrall]

Alright, I've made this website for my grandmother who is selling her house. I've made these little popup "tips" elements that fade in with a little pointy thing to sort of direct users around the website, but of course since it looks awesome in FireFox, is doesn't work quite the same way in MSIE 7. I haven't even tried 6 yet, but I'm in the process of setting up a VM, but that's a different story.

Anyways, check this site out first in FF and then in IE. After 5 seconds or so, the little tip should fade in. In FF, you'll notice that the non-yellow part right below the arrow is transparent. However, in IE, it is opaque and white. I can't figure out for the life of me how to make it transparent in IE. Any suggestions?

 

[Raziaar]

Browser support, especially with older less supported browsers like IE 6 and earlier, is going to be VERY different. No browser currently supports all CSS features, which sucks, so you sort of have to try your website with all sorts of browsers and learn to know your audience and what they might be using.

 

[DreamThrall]

Yeah, I know... I've got Google Analytics set up so I know what browsers are using it and such. This particular issue isn't even a big deal, it's just annoying me, so I was wondering if anyone had any ideas as to how to make that area of the div transparent like it should be.

 

[evil^milk]

It works on both on my computer.

*shrug*

 

[mindless_moder]

do the tips only come up once ? , i refreshed the page and i cant see the div anymore..

 

[DreamThrall]

Once you click on them or click on whatever they're pointing at they go away for good.

 

[mindless_moder]

well that kind of sucks from a debugging standpoint .
edit: its completely borked in IE6 , i hink you're better off using a div with a alpha masked png background , or just a plain rectangular div.

 

[Beerdude26]

IE6 slaughters the transparency in PNG files and then has sex with the corpse. Just saying.

 

[DreamThrall]

well that kind of sucks from a debugging standpoint .
edit: its completely borked in IE6 , i hink you're better off using a div with a alpha masked png background , or just a plain rectangular div.

It's not too bad for debugging, all I have to do is delete the cookies from the site.

IE6 slaughters the transparancy in PNG files and then has sex with the corpse. Just saying.

Yeah, I have a script that supposedly fixes that, but I haven't had a chance to actually test it out yet.

 

[Dekstar]

Excellent site design, DreamThrall. I'm making a site for one of my university modules, but it'll never be quite as good as that.
It looks really professional, and I like the tips, although on my Firefox (latest version) they bug the transparency and loading of the pictures a tiny bit, but it's nothing major.

 

[DreamThrall]

Excellent site design, DreamThrall. I'm making a site for one of my university modules, but it'll never be quite as good as that.
It looks really professional, and I like the tips, although on my Firefox (latest version) they bug the transparency and loading of the pictures a tiny bit, but it's nothing major.

Thanks! :thumbs: By "latest version", do you mean 2.0.0.13 or the latest beta? Also, are you talking about the fading in animation transparency or the transparency on the PNGs?

I'm using the AjaxControlToolkit for the animations just because it's easy, but I know that sometimes they can be a little choppy.

By the way, if you want any tips on how I did any of the stuff on there, just ask.

 

[PvtRyan]

IE6 slaughters the transparancy in PNG files and then has sex with the corpse. Just saying.

You can add a conditional IE6 stylesheet that overwrites the PNG with a GIF. Uglier transparency, but at least it'll work.

Also: another bug. If I click any link, close the tab and reopen the link in your post, it lands me on the last page I viewed. It's a cache problem (Firefox probably thinks it's all the same page and reloads whatever it had in its cache) because Ctrl+F5 sends me to the main page like it should. Using Firefox 3 beta 4.

 

[Mutley]

Yo Dream,

IE doesn't render PNGs correctly thus giving any transparent areas a solid white background, it's easy to fix however.

In your <head> tags place this:

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

(Which basically means, if the browser is IE, it uses a Javascript file)

Then in pngfix.js, have the following code:

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? " " : " "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

This should fix your problem.

 

[theGreenBunny]

The problem is caused by the javascript fade-in effect, or rather how IE seems to handle it. Rather than rendering the tooltip's background transparently, it renders it in the page's body's background colour (which in this case is the default white, though there's a background image rendered over that). Turn off scripts and it looks fine.

You might be able to force IE to re-render it properly by modifying the element slightly after fading it in, perhaps by moving it a bit. It's a bit of a long shot though. Anyway, if you want to fix it I'd say the javascript is where you want to look for a solution, rather than the CSS.