Browser CSS float error detection with jQuery
Mario Heiderich of Ormigo has created a jQuery based code snippet/bookmarklet that is capable of detecting floating errors and adding a dotted orange border to elements which should be cleared - but aren’t.
It saved me a huge bunch of time debugging complex layouts for all browsers - especially IE6. If jQuery isn’t already loaded on the page it can easily be fetched with the several jQuerify approaches.
Snippet
JAVASCRIPT:
-
-
(function(){
-
function checkNext(element, floating) {
-
if(element.css(‘clear’) != ‘none’) {
-
var clearing = true;
-
} else {
-
if(element.next().length !== 0) {
-
var clearing = false;
-
checkNext(element.next(), floating);
-
} else {
-
console.log(element);
-
element.css({border:‘2px dotted orange;’})
-
}
-
}
-
}
-
$(‘body *’).each(function(){
-
var element = $(this);
-
if(element.css(‘float’) !== ‘none’ && element.next().length !== 0) {
-
checkNext(element.next(), element.css(‘float’));
-
}
-
eval(‘’);
-
});
-
})();
-
Bookmarklet
JAVASCRIPT:
-
-
javascript:eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!‘’.replace(/^/,String)){while(c–)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return‘\\w+’};c=1};while(c–)if(k[c])p=p.replace(new RegExp(‘\\b’+e(c)+‘\\b’,‘g’),k[c]);return p}(‘(3(){3 5(a,b){4(a.2(\’p\’)!=\’9\’){6 c=h}d{4(a.1().7!==0){6 c=o;5(a.1(),b)}d{n.m(a);a.2({l:\’j i k;\’})}}}$(\’g *\’).f(3(){6 a=$(e);4(a.2(\’8\’)!==\’9\’&&a.1().7!==0){5(a.1(),a.2(\’8\’))}q(\’\’)})})();’,27,27,‘|next|css|function|if|checkNext|var|length|float|none||||else|this|each|body|true|dotted|2px|orange|border|log|console|false|clear|eval’.split(‘|’),0,{}))
-
