SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css "behavior" not validtated by w3c validator

    Hello friends


    This time i am facing a css validation problem

    In my client site i am using png images for the background as we know that png background don't work on IE6 browser so i am using a javascript with css to make working png images in ie6 browser and its working fine, but when i m validating my CSS code in w3c css validator its FAIL.

    Css code is as follows that i m using

    .linkpage-bg, .linkpageinner, .meupagebg, .footer, .linkpage-left ul li, .hompage-body, .flashbox,
    .homeleftpart ul li, .gallery, .coloumbg2, .coloumlast{
    behavior: url(iepngfix.htc);
    }

    "behavior" word is not support by w3c validator.

    following code is the javascript i m using for this work

    Code:
    // IE5.5+ PNG Alpha Fix v2.0 Alpha: Background Tiling Support
    // (c) 2008-2009 Angus Turnbull http://www.twinhelix.com
    
    // This is licensed under the GNU LGPL, version 2.1 or later.
    // For details, see: http://creativecommons.org/licenses/LGPL/2.1/
    
    var IEPNGFix = window.IEPNGFix || {};
    
    IEPNGFix.tileBG = function(elm, pngSrc, ready) {
    	// Params: A reference to a DOM element, the PNG src file pathname, and a
    	// hidden "ready-to-run" passed when called back after image preloading.
    
    	var data = this.data[elm.uniqueID],
    		elmW = Math.max(elm.clientWidth, elm.scrollWidth),
    		elmH = Math.max(elm.clientHeight, elm.scrollHeight),
    		bgX = elm.currentStyle.backgroundPositionX,
    		bgY = elm.currentStyle.backgroundPositionY,
    		bgR = elm.currentStyle.backgroundRepeat;
    
    	// Cache of DIVs created per element, and image preloader/data.
    	if (!data.tiles) {
    		data.tiles = {
    			elm: elm,
    			src: '',
    			cache: [],
    			img: new Image(),
    			old: {}
    		};
    	}
    	var tiles = data.tiles,
    		pngW = tiles.img.width,
    		pngH = tiles.img.height;
    
    	if (pngSrc) {
    		if (!ready && pngSrc != tiles.src) {
    			// New image? Preload it with a callback to detect dimensions.
    			tiles.img.onload = function() {
    				this.onload = null;
    				IEPNGFix.tileBG(elm, pngSrc, 1);
    			};
    			return tiles.img.src = pngSrc;
    		}
    	} else {
    		// No image?
    		if (tiles.src) ready = 1;
    		pngW = pngH = 0;
    	}
    	tiles.src = pngSrc;
    
    	if (!ready && elmW == tiles.old.w && elmH == tiles.old.h &&
    		bgX == tiles.old.x && bgY == tiles.old.y && bgR == tiles.old.r) {
    		return;
    	}
    
    	// Convert English and percentage positions to pixels.
    	var pos = {
    			top: '0%',
    			left: '0%',
    			center: '50%',
    			bottom: '100%',
    			right: '100%'
    		},
    		x,
    		y,
    		pc;
    	x = pos[bgX] || bgX;
    	y = pos[bgY] || bgY;
    	if (pc = x.match(/(\d+)%/)) {
    		x = Math.round((elmW - pngW) * (parseInt(pc[1]) / 100));
    	}
    	if (pc = y.match(/(\d+)%/)) {
    		y = Math.round((elmH - pngH) * (parseInt(pc[1]) / 100));
    	}
    	x = parseInt(x);
    	y = parseInt(y);
    
    	// Handle backgroundRepeat.
    	var repeatX = { 'repeat': 1, 'repeat-x': 1 }[bgR],
    		repeatY = { 'repeat': 1, 'repeat-y': 1 }[bgR];
    	if (repeatX) {
    		x %= pngW;
    		if (x > 0) x -= pngW;
    	}
    	if (repeatY) {
    		y %= pngH;
    		if (y > 0) y -= pngH;
    	}
    
    	// Go!
    	this.hook.enabled = 0;
    	if (!({ relative: 1, absolute: 1 }[elm.currentStyle.position])) {
    		elm.style.position = 'relative';
    	}
    	var count = 0,
    		xPos,
    		maxX = repeatX ? elmW : x + 0.1,
    		yPos,
    		maxY = repeatY ? elmH : y + 0.1,
    		d,
    		s,
    		isNew;
    	if (pngW && pngH) {
    		for (xPos = x; xPos < maxX; xPos += pngW) {
    			for (yPos = y; yPos < maxY; yPos += pngH) {
    				isNew = 0;
    				if (!tiles.cache[count]) {
    					tiles.cache[count] = document.createElement('div');
    					isNew = 1;
    				}
    				var clipR = Math.max(0, xPos + pngW > elmW ? elmW - xPos : pngW),
    					clipB = Math.max(0, yPos + pngH > elmH ? elmH - yPos : pngH);
    				d = tiles.cache[count];
    				s = d.style;
    				s.behavior = 'none';
    				s.left = (xPos - parseInt(elm.currentStyle.paddingLeft)) + 'px';
    				s.top = yPos + 'px';
    				s.width = clipR + 'px';
    				s.height = clipB + 'px';
    				s.clip = 'rect(' +
    					(yPos < 0 ? 0 - yPos : 0) + 'px,' +
    					clipR + 'px,' +
    					clipB + 'px,' +
    					(xPos < 0 ? 0 - xPos : 0) + 'px)';
    				s.display = 'block';
    				if (isNew) {
    					s.position = 'absolute';
    					s.zIndex = -999;
    					if (elm.firstChild) {
    						elm.insertBefore(d, elm.firstChild);
    					} else {
    						elm.appendChild(d);
    					}
    				}
    				this.fix(d, pngSrc, 0);
    				count++;
    			}
    		}
    	}
    	while (count < tiles.cache.length) {
    		this.fix(tiles.cache[count], '', 0);
    		tiles.cache[count++].style.display = 'none';
    	}
    
    	this.hook.enabled = 1;
    
    	// Cache so updates are infrequent.
    	tiles.old = {
    		w: elmW,
    		h: elmH,
    		x: bgX,
    		y: bgY,
    		r: bgR
    	};
    };
    
    
    IEPNGFix.update = function() {
    	// Update all PNG backgrounds.
    	for (var i in IEPNGFix.data) {
    		var t = IEPNGFix.data[i].tiles;
    		if (t && t.elm && t.src) {
    			IEPNGFix.tileBG(t.elm, t.src);
    		}
    	}
    };
    IEPNGFix.update.timer = 0;
    
    if (window.attachEvent && !window.opera) {
    	window.attachEvent('onresize', function() {
    		clearTimeout(IEPNGFix.update.timer);
    		IEPNGFix.update.timer = setTimeout(IEPNGFix.update, 100);
    	});
    }

    if you have any solution for this problem please share with me.
    It will be a great help for me.


    LOTS of thanks in advance
    Last edited by ralph.m; Oct 20, 2010 at 23:37. Reason: added code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    "Behavior" is not part of the CSS specs, so it must fail validation. But validation is only a guide, not necessarily a sign that your site is about to fall apart. If you are going to use things like behavior then you just have to accept a few validation warnings.

    Are your pngs transparent? If not, use png 8, as this works in IE6.

    To help with validation (and your pride) you can place behavior code in an ie6 only css file, and then it won't necessarily show up during the validation process.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thanks for your quick response

    if you have any other code for the same and you don't mind Please share with me



    Thanks once again

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by bhagwati View Post
    if you have any other code for the same and you don't mind Please share with me
    I've never used any of these fixes, because I don't care about IE6, but this one seems to be the most popular solution:

    http://www.dillerdesign.com/experiment/DD_belatedPNG/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Just because it doesn't validate doesn't mean it's necessarily evil. The W3C validator only accepts what's in the spec and it's a tool, not a legal requirement.

    Those kind of proprietary extras work and serve their purpose, why make a fuss about it when visitors don't care if it validates or not.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •