JavaScript and client side scripting.
Moderator: General Moderators
malcolmboston
DevNet Resident
Posts: 1826 Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK
Post
by malcolmboston » Fri Apr 06, 2007 3:54 am
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?
Benjamin
Site Administrator
Posts: 6935 Joined: Sun May 19, 2002 10:24 pm
Post
by Benjamin » Fri Apr 06, 2007 6:27 am
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 » Fri Apr 06, 2007 6:31 am
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
Benjamin
Site Administrator
Posts: 6935 Joined: Sun May 19, 2002 10:24 pm
Post
by Benjamin » Fri Apr 06, 2007 6:42 am
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 » Fri Apr 06, 2007 8:17 am
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 » Fri Apr 06, 2007 2:19 pm
matthijs wrote: Shouldn't the conditional comments be in the HTML (specifically in the <head>)?
Yes they should...
veridicus
Forum Commoner
Posts: 86 Joined: Fri Feb 23, 2007 9:16 am
Post
by veridicus » Fri Apr 06, 2007 3:07 pm
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?
RobertGonzalez
Site Administrator
Posts: 14293 Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA
Post
by RobertGonzalez » Fri Apr 06, 2007 3:44 pm
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 » Sat Apr 07, 2007 4:23 am
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
RobertGonzalez
Site Administrator
Posts: 14293 Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA
Post
by RobertGonzalez » Sat Apr 07, 2007 11:30 am
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 » Sat Apr 07, 2007 12:16 pm
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.
veridicus
Forum Commoner
Posts: 86 Joined: Fri Feb 23, 2007 9:16 am
Post
by veridicus » Sat Apr 07, 2007 4:03 pm
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.)
xinnex
Forum Commoner
Posts: 33 Joined: Sun Jan 07, 2007 7:38 pm
Location: Copenhagen, Denmark
Post
by xinnex » Sat Apr 07, 2007 6:04 pm
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)";
}