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