Internet Explorer (both 6 and 7) has a niggly habit of rendering vertical spacing due to an empty div element e.g. <div id=”testdiv”></div> renders as vertical whitespace in IE but not in Firefox or Opera. It would be easy to prevent this happening by using CSS to hide the div using “display:none” however what if on certain pages content will appear in that div for example when loaded via dynamic code such as PHP? We want IE to hide the div when its empty but show all the content correctly when so loaded. The solution is blank HTML comments. Simply by popping in <!– –> at the beginning of your div code will cause IE to hide the div if there is no further content e.g. <div id=”testdiv”><!– –> dynamic content follows</div>. Negative margins begone!

3 Comments »

Some handy apps for my fellow codemonkeys out there:

ComponentSoftware Diff (CSDiff) is a free advanced file difference analysis tool for Windows. Use it to analyze what changes have been made between two revisions of the same file, folder or archived folder. CSDiff is commonly used to analyze program source files, HTML documents and MS-Word documents. I use this a lot for comparing folders of PHP code to track any changes I may have forgotten to document. http://www.componentsoftware.com/

PowerGREP is a powerful Windows grep tool. Quickly search through large numbers of files on your PC or network, including text and binary files, compressed archives, MS Word documents, Excel spreadsheets and PDF files, etc. Find the information you want with powerful text patterns (regular expressions) specifying the form of what you want, instead of literal text. Search and replace with one or many regular expressions to comprehensively maintain web sites, source code, reports, etc. Extract statistics and knowledge from logs files and large data sets. This really is a great tool. I use a lot of third party component for Joomla! and isolating a particular code section can be time consuming. A simple search of the code folder with PowerGREP can unearth that code very quickly. http://www.powergrep.com/

Firebug is a plugin for Mozilla Firefox that puts a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. This is a genius little tool and saves you having to repetitively upload code changes to your CSS/HTML/Javascript when you can live edit them in the Firebug toolbar to see what effect that has. Very good for finding the right sizes for your div elements. Also check out the YSlow plugin for Firebug which analyzes your web pages and recommends mechanisms for speeding up the load times of each page. http://www.getfirebug.com/ http://www.yahooapis.com/yslow/

No Comments »