I hate IE6, CSS hack not working?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

I hate IE6, CSS hack not working?

Post 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?
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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;
} 
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

I had a hunch that IE might not overwrite background images. Stranger things have happened.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Shouldn't the conditional comments be in the HTML (specifically in the <head>)?
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

matthijs wrote:Shouldn't the conditional comments be in the HTML (specifically in the <head>)?
Yes they should...
User avatar
veridicus
Forum Commoner
Posts: 86
Joined: Fri Feb 23, 2007 9:16 am

Post 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?
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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;
}
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I thought there were .htc file hacks that could handle transparencies of PNG's%AC
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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.
User avatar
veridicus
Forum Commoner
Posts: 86
Joined: Fri Feb 23, 2007 9:16 am

Post 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.)
User avatar
xinnex
Forum Commoner
Posts: 33
Joined: Sun Jan 07, 2007 7:38 pm
Location: Copenhagen, Denmark

Post 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)";
}
Post Reply