Today I had an issue with an element was breaking a page layout, making the page width wider than 960px. I tried to find it with Firebug, looking at the layout properties of some divs and elements, but I couldn’t find it. I knew it had to be there, so I decided to highlight all div elements in the page with a red border. And it worked! I found it right away.
Here is the code I used to highlight the fields (I had to do it in prototype only):
Prototype JS:
-
<img src="http://l.wordpress.com/latex.php?latex=%28%27div%27%29.each%28function%28item%29%7B%20%20%24%28item%29.setStyle%28%7B%20border%3A%20%27solid%201px%20red%27%20%7D%29%3B%7D%29%3B%3C%2Fpre%3EjQuery%3A%3Cpre%20lang%3D%22javascript%22%3E%24%28%27div%27%29.css%28%27border%27%2C%20%27solid%201px%20red%27%29%3B%3C%2Fpre%3EMootools%3A%3Cpre%20lang%3D%22javascript%22%3E&bg=0D324F&fg=FFFFFF&s=1" title="('div').each(function(item){ $(item).setStyle({ border: 'solid 1px red' });});
-
jQuery:
$('div').css('border', 'solid 1px red');
Mootools:
" style="vertical-align:-20%;" class="tex" alt="('div').each(function(item){ $(item).setStyle({ border: 'solid 1px red' });});
jQuery:
$('div').css('border', 'solid 1px red');
Mootools:
" />('div').setStyle('border', 'solid 1px red');
PS: Note that by adding a 1px border to all divs in the page, the page layout will be affected and some items may display improperly. Of course, you can use other colors than red :)
