Page 1 of 1

I hate IE6, CSS hack not working?

Posted: Fri Apr 06, 2007 3:54 am
by malcolmboston
i have this class

Code: Select all

div.mainContent {
	padding-left: 3px;
	padding-top: 3px;
	background-color: #a89c8b;
	background-image:url(images/content_bg_old.jpg);
	<!--[if IE 6]>
	background-image:url(images/content_bg.jpg);
	<![endif]-->
	background-repeat:repeat;
	width: 756px;
	float: left;
}
however it never dynamically selects the alternative.

Any ideas why?

Posted: Fri Apr 06, 2007 6:27 am
by Benjamin
This is a longshot, but try this..

Code: Select all


div.mainContent {
        padding-left: 3px;
        padding-top: 3px;
        background-color: #a89c8b;
        <!--[if IE 6]>
        background-image:url(images/content_bg.jpg);
        <![endif]-->
        background-image:url(images/content_bg_old.jpg);
        background-repeat:repeat;
        width: 756px;
        float: left;
} 

Posted: Fri Apr 06, 2007 6:31 am
by malcolmboston
i havent tried it tbh but that makes no sense.

Think about it, it asks if its IE, if so set it to a specific style and then overwrites it anyway

Posted: Fri Apr 06, 2007 6:42 am
by Benjamin
I had a hunch that IE might not overwrite background images. Stranger things have happened.

Posted: Fri Apr 06, 2007 8:17 am
by matthijs
Shouldn't the conditional comments be in the HTML (specifically in the <head>)?

Posted: Fri Apr 06, 2007 2:19 pm
by nickvd
matthijs wrote:Shouldn't the conditional comments be in the HTML (specifically in the <head>)?
Yes they should...

Posted: Fri Apr 06, 2007 3:07 pm
by veridicus
Just out of curiosity, why would you want a different background image just for IE6 users? Is it to solve some other quirk, like box sizes?

Posted: Fri Apr 06, 2007 3:44 pm
by RobertGonzalez
Another shot in the dark:

Code: Select all

div.mainContent {
        padding-left: 3px;
        padding-top: 3px;
        background-color: #a89c8b;
        background-image:url(images/content_bg_old.jpg) !important;
        background-image:url(images/content_bg.jpg);
        background-repeat:repeat;
        width: 756px;
        float: left;
}

Posted: Sat Apr 07, 2007 4:23 am
by malcolmboston
veridicus wrote:Just out of curiosity, why would you want a different background image just for IE6 users? Is it to solve some other quirk, like box sizes?
My design makes use of transparent PNG's heavily, often multi-layered on top of each other, IE6 hates PNG's, hackable workarounds exist but not, to my knowledge, on background-images

Posted: Sat Apr 07, 2007 11:30 am
by RobertGonzalez
I thought there were .htc file hacks that could handle transparencies of PNG's%AC

Posted: Sat Apr 07, 2007 12:16 pm
by nickvd
Yes, the HTC will work on any png, css background or otherwise. However It cannot do anything with tiled background pngs. As a result, any tiled backgrounds (drop shadows anyone?) won't tile when using the .HTC file.

Posted: Sat Apr 07, 2007 4:03 pm
by veridicus
I've heard there are some performance issues with transparency hacks in IE. Does layering or using them in the background slow down page rendering dramatically?

(I'd test it myself but I don't have Windows anywhere nearby.)

Posted: Sat Apr 07, 2007 6:04 pm
by xinnex
Maybe this script will help on the PNG-issue..

Code: Select all

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   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) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
		 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
	     }
      }
   }
window.attachEvent("onload", correctPNG);

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
	window.attachEvent("onload", fnLoadPngs);
}

function fnLoadPngs() {
	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
	for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) {
		if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
			this.fnFixPng(obj);
			obj.attachEvent("onpropertychange", this.fnPropertyChanged);
		}
	}
}
	
function fnPropertyChanged() {
	if (window.event.propertyName == "style.backgroundImage") {
		var el = window.event.srcElement;
		if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {
			var bg	= el.currentStyle.backgroundImage;
			var src = bg.substring(5,bg.length-2);
			el.filters.item(0).src = src;
			el.style.backgroundImage = "url(x.gif)";
		}
	}
}
	
function fnFixPng(obj) {
	var bg	= obj.currentStyle.backgroundImage;
	var src = bg.substring(5,bg.length-2);
	obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
	obj.style.backgroundImage = "url(x.gif)";
}