Thursday, November 25, 2010

Firebug Tutorial – Logging, Profiling and CommandLine (Part I)

Section 1: Console Tab : Logging, Profiling and CommandLine (Part I)


Overview of Console Tab


This tab is mainly used for logging. It also can be used as CommandLine window (like immediate window in Microsoft Visual Studio) while you are debugging the Javascript. It can be used for monitoring the execution of Javascript code by using Profiling service.


The following topic will be covered in this section.



  • Logging in Firebug (with String Substitution pattern )

  • Grouping the logs or messages

  • console.dir and console.dirxml

  • Assertion ( console.assert() )

  • Tracing ( console.trace() )

  • Timing ( Measuring the time of your code)

  • Javascript Profiler (An introduction in this tutorial, the details will be covered in next tutorial.)


#1. Logging in Firebug


Firebug supports logging in Console tab. So, you don’t need to use alert(‘something’) or document.write(‘something’) anymore.


There are five types of logging in Firebug.



  • console.log : Write a message without icon.

  • console.debug : Writes a message to the console, including a hyperlink to the line where it was called

  • erroricon.png console.error() : Writes a message to the console with the visual “error” icon and color coding and a hyperlink to the line where it was called.

  • infoicon.png console.info() : Writes a message to the console with the visual “info” icon and color coding and a hyperlink to the line where it was called.

  • warningicon.png console.warn() : Writes a message to the console with the visual “warning” icon and color coding and a hyperlink to the line where it was called.


Example Code:



  • Open the htm file called “Plain HTML” or create one HTML file.

  • Paste the following code with <body> tag.



1   <script language="javascript" type="text/javascript">

2   console.log('This is log message');

3   console.debug('This is debug message');

4   console.error('This is error message');

5   console.info('This is info message');

6   console.warn('This is warning message');

7   </script>

You will get the following output. If you click on hyperlink (“test.htm” in this case), it will take you to script tab and will highlight the line that wrote this message.


basic-logging-concept.jpg


String Substitution Patterns


String substitution parterns can be used in console.log, console.info, console.debug, console.warn and console.error . You can use the same way that we used in C/C++.



%s        String

%d, %i   Integer (numeric formatting is not yet supported)

%f          Floating point number (numeric formatting is not yet supported)

%o        Object hyperlink

Example :


Note: I will use console.log in the example below even all console objects (console.log, console.info, console.debug, console.warn and console.error ) support string substitution.



  • Remove “script” tag that we pasted for the previous example.

  • Paste the code below within <body> tag.



01 <script language="javascript" type="text/javascript">

02
03 //This is for normal string substitution " %s, %d, %i, %f".

04 console.log("My Name is <strong>%s</strong>. My Date of Birth is <strong>%dth %s, %i</strong>. My height is <strong>%f</strong> m.", "Nicolas Cage", 7, 'January', 1964, 1.8542);

05
06 function Foo(){

07 this.LeftHand = function(){

08 return "Left Hand";

09 }

10 this.RightHand = function(){

11 return "Right Hand";

12 }

13

14

15 //This is for object "%o".

16 var objFoo = new Foo();

17 console.log('This is <strong>%o</strong> of Foo class.', objFoo);

18

19 </script>


console-string-substitution1.jpg


If you are using %o in your log, the object will be shown as a hyperlink in green color. This hyperlink is linked to the DOM tab. So, If you click “object” in second line, you will see the list of properties of that object (LeftHand and RightHand in this case.)


#2. Grouping


Firebug allows you to group the message or log in Console tab. If you have some many logs in your code, you can probably divide your log into small group or subgroup


Example ~



01   <script language="javascript" type="text/javascript">

02  

03   var groupname = 'group1';

04   console.group("message group : %s " , groupname);

05   console.log("log message 1 from %s", groupname);

06   console.log("log message 2 from %s", groupname);

07   console.log("log message 3 from %s", groupname);

08   console.groupEnd();

09  

10   groupname = 'group2';

11   console.group("message group : %s " , groupname);

12   console.log("log message 1 from %s", groupname);

13  

14   var subgroupname = 'subgroup1';

15   console.group("message group : %s " , subgroupname);

16   console.log("log message 1 from %s", subgroupname);

17   console.log("log message 2 from %s", subgroupname);

18   console.log("log message 3 from %s", subgroupname);

19   console.groupEnd();

20  

21   console.log("log message 3 from %s", groupname);

22   console.groupEnd();

23  

24   </script>


group-message.jpg


#3. console.dir and console.dirxml



  • console.dir : It can be used for getting all properties and methods of a particular object. According the example below, we can get the Model (property) and getManufactor (method) of Car object by using console.dir(); You can also pass the object of HTML element (eg: console.dir(document.getElementById(‘tbl1′)); ) instead of objCar and let’s see the result. (You will get all properties and methods of the HTML table called “tbl1″).

  • console.dirxml : print the XML source tree of HTML element.



01   <table id="tbl1" cellpadding="0" cellspacing="0" border="0">

02   <tr>

03   <td>A</td>

04   <td>B</td>

05   <td>C</td>

06   </tr>

07   </table>

08   <script language="javascript" type="text/javascript">

09   //Create a class

10   function Car(){

11   this.Model = "Old Model";

12  

13   this.getManufactor = new function(){

14   return "Toyota";

15   }

16   }

17  

18   //Create a object

19   var objCar = new Car();

20  

21   //Firebug

22   console.dir(objCar);

23   console.dirxml(document.getElementById('tbl1'));

24  

25   </script>

console-dir.jpg


#4. Assertion ( console.assert() )


You can use console.assert() to test whether an expression is true or not. If the expression is false, it will write a message to the console and throw an exception.


Example :



01   <script language="javascript" type="text/javascript">

02   function whatIsMyAge(year){

03   var currYear = 2007;

04   return currYear - year;

05   }

06  

07   var yearOfBirth1 = 1982;

08   var age1 = 25;

09   console.assert(whatIsMyAge(yearOfBirth1) == age1);

10  

11   var yearOfBirth2 = 1982;

12   var age2 = 11;

13   console.assert(whatIsMyAge(yearOfBirth2) == age2); //You should get the error here.

14   </script>



assertion-failure.jpg


#5. Tracing ( console.trace() )


This function is very interesting. Before I tell you the way that I understand, let’s take a look what console.trace does exactly in official website.



console.trace()


Prints an interactive stack trace of JavaScript execution at the point where it is called.


The stack trace details the functions on the stack, as well as the values that were passed as arguments to each function. You can click each function to take you to its source in the Script tab, and click each argument value to inspect it in the DOM or HTML tabs.



This function will tell you about the route information from start point to end point. If you are not clear what I mean, let’s take a look at the sample code and the result.



01   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02   <html xmlns="http://www.w3.org/1999/xhtml" >

03   <head>

04   <title>Firebug</title>

05   <script language="javascript" type="text/javascript">

06   function startTrace(str){

07   return method1(100,200);

08   }

09   function method1(arg1,arg2){

10   return method2(arg1 + arg2 + 100);

11   }

12   function method2(arg1){

13   var var1 = arg1 / 100;

14   return method3(var1);

15   }

16   function method3(arg1){

17   console.trace();

18   var total = arg1 * 100;

19   return total;

20   }

21  

22   </script>

23   </head>

24   <body>

25   <input type="button" value="Trace" onclick="startTrace('Result');"/>

26   </body>

27   </html>

trace.jpg


Suppose: we wanna know how “method3″ function is invoked. So, we put this code “console.trace()” in that method. then, we run the program and we got the result as picture above. If we read the result from bottom to top, we will see “onclick(click clientX=34, clientY=26)”. That means the execution of Javascript started at on click event of button. then, we got “startTrace(“Result”)” in second line. That means startTrace function is invoked after firing onclick event and the parameter is “Result”. If we keep on checking from bottom to top, we will figure out the completed route from onclick event to method3.


If you wanna test more, you can move this code “console.trace()” to method2(). then, firebug will give the new route from onclick event which is a started point to method2() which is the end point.


I think that it’s pretty useful if you are debugging the other developer’s source code and you have no idea why this function is invoked.


Let me know if you are not clear what I’m trying to explain about console.trace();.


#6. Timing ( Measuring the time of your code)


You can use console.time(timeName) function to measure how long a particular code or function take. This feature is very helpful if you are trying to improve the performance of your Javascript code.


Example :



01   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02   <html xmlns="http://www.w3.org/1999/xhtml" >

03   <head>

04   <title>Firebug</title>

05   <script language="javascript" type="text/javascript">

06   function measuretheTime(){

07   var timeName = 'measuringTime';

08   console.time(timeName);

09  

10   for(var i=0;i&lt;1000;i++){

11   ///do something

12   for(var j=0;j&lt;100;j++){

13   //do another thing.

14   }

15   }

16  

17   console.timeEnd(timeName);

18   }

19   </script>

20   </head>

21   <body>

22   <input type="button" value="Trace" onclick="measuretheTime();"/>

23   </body>

24   </html>

Result : measuringTime: 16ms


#7. Javascript Profiler


You can start the profiler thought code (console.profile(‘profileName’)) or by clicking “Profile” button from “Console” tag. It can be used for improving the performance of Javascript. It is similiar to the console.time() function but profiler can give your more advanced and detailed information.


I will tell you about this more details in next tutorial (Part2) . I hope you all are clear about this tutorial.

Sunday, November 21, 2010

Firebug Tutorial – Overview of Firebug



A few words from me


It has been over 1 year that I’m using Firebug in web development. I found it very useful. I’m really thank to SangSing who introduces me about Firebug. I used to encourage a lot of my techie friends to use Firebug but they said that they don’t know how to use it. They told me that they wanna get something that include all features of firebug and examples. I googled a lit bit but I didn’t find nice resources that covers everything about firebug. So, I decided to write this tutorial. I will try to cover all features of firebug as much as I can. I will show each features with sample sourcecode and screenshot if it required. Don’t hesitate to contact me if you have any suggestion or comment.


There are 5 sections in this tutorial.



  • Section 1: Overview of Firebug : An introduction of Firebug and feature lists, how to install it and a few notes



  • Section 2: Logging, Tracing and CommandLine : Everything related to Console tab. An introduction of CommandLine windows which is the same as Immediate windows or Watch window from Visual Studio.



  • Section 3: HTML DOM Inspector and HTML CRUD operation : This section will tell you about what HTML inspecting is, how to inspect the HTML element, why it is useful and etc. I will also show you how to create/update/delete the HTML DOM dynamically in HTML tab.



  • Section 4: Javascript debugging with Firebug : This section will cover everything about javascript debugging which is the most famous feature of Firebug. It will also show you how to use Console tab while debugging the Javascript.



  • Section 5: CSS, DOM and Net Tab : (I haven’t decided whether I should write about them in one section or not. )


As I said above, I will try to cover as much as possible. If I miss out something in this tutorial, please let me know. I appreciated it.


Getting Started Overview of Firebug


Note: I will cover some basic understanding about firebug and its features, installation and a few screenshots in this section. So, if you already have some ideas about Firebug, you may probably skip this section.


Firebug - Web Development Evolved


What is Firebug?


Firebug is one of the most popular Mozilla Firefox’s extensions (a.k.a addon). It is also a tool that make the web developers’ life easier. It includes a lot of cool features such as debugging, HTML inspecting, profiling and etc which are very useful for web development.


Features



  • Javascript debugging

  • Javascript CommandLine


  • Monitor the Javascrit Performance and XmlHttpRequest

  • Logging


  • Tracing

  • Inspect HTML and Edit HTML


  • Edit CSS


Where to get Firebug Addon?



  • Go to the official firebug website http://getfirebug.com .

  • There is the image as below at the right-side of the firebug website. Click this image to install.


Click to install Firebug



  • The following dialog will be shown after clicking the image above. Click to “Install Now” button.


Firebug - Software Installation



  • After the installation is completed, you need to restart the browser.


Screenshots


Main Menu (under “Tools” Menu)


“Firebug” and “Error Console” menu will be shown under “Tools” menu of Firefox.


firebug-menu-under-tool-menu.jpg



  • Firebug : It is just a placeholder for Firebug’s submenus.

  • Error Console : If you click this menu, one console window will be launched with the list of errors, warnings and message. Actually, this error console is the same as the console tab from Firebug console.


Firebug Menu


If you click “Firebug” menu under “Tools”, the following submenus will be shown.


firebug-menu-under-firebug-menu.jpg



  • Open Firebug : Open the firebug console within the browser. If you don’t wanna click this menu, you can simply press “F12″ to open the firebug console.

  • Open Firebug in New Window : Open the firebug console in separated window.

  • Disable Firebug : It is for disabling firebug. This option is very important. You should disable the firebug if you don’t need it because If you don’t disable the firebug, it might be a lit bit slow to surf the Ajax-enabled websites like GMail.

  • Disable Firebug for **** : You can disable the specific website instead of disabling the whole firebug.

  • Allowed Sites : You can add the list of website that you want to surf with Firebug enabled option.

  • Inspect the Element : This menu is for inspecting the HTML element. Please read more about this in section 3.

  • Profile Javascript : This option is available in Firebug enabled mode only. It is used for monitoring the execution of javascript code. This option is really useful when you have performance issue with your code. Please read more about this in Section 4.

  • Clear Console : Clear the console tab of Firebug console.

  • CommandLine : Open the console tab

  • Search : Set the focus to the Search textbox of current tab.


Content Menu


There is only one menu called “Inspect Element” in content menu. This menu is very useful. Please read more about this in Section 3.


inspect-element-on-content-menu.jpg


Firebug Console


The picture below is Firebug console.


Firebug Console


It contains six tabs such as Console tab, HTML tab, CSS tab, Script tab, DOM tab and Net tab.



  • Console tab : It is for logging, profiling, tracing and commandline.

  • HTML tab : It is for inspecting HTML element, editing HTML and changing the stylesheet at runtime. CSS, Layout and DOM console are already included as the subtabs.

  • CSS tab : You can check how many css file included in the webpage easily. You can simply select the CSS file that you like and you can made the changes to that file on the fly. (I don’t use that tab that much since the same one is already included in HTML tab. )

  • Script tab : It is for debugging Javascript code. Watch and Breakpoints consoles are the subtab of Script tab.

  • DOM tab : It is for exploring DOM. (I don’t use that tab that much. Instead, I used to use DOM tab from HTML console and Script tab.)

  • Net tab : It is for monitoring network activities. It helps you to know why your page (or a particular webpage) is taking so long to load in the browser.


Status Bar


You will see the green cycle if there is no error on your page.


green-cycle-on-status-bar.jpg


You will see the red cycle and the count of errors if there is some errors in your page.


red-cycle-on-status-bar.jpg


Keyboard and Mouse Shortcuts


F12. I used to use only F12 to open/close the Firebug console.


If you wanna read the completed list of shortcuts, you can check-out here.


Problem?


Please check-out this FAQ page.


If you still have problems, you drop a comment in my blog. I will reply as soon as possible. Or you can probably contact with Firebug User Group.


Conclusion


That’s all. :) I think you now have some ideas about what firebug is, how it looks like and how to install. If you are already familiar with firebug, this section will be too plain for you since I didn’t put anything new in this section. I will tell you more details about each tab in next section. So, come back tomorrow!!

Thursday, November 11, 2010

Push Your Web Design Into The Future With CSS3

There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification. Realistically, you won’t be able to use these on your everyday client projects for another few years, but for design blogs and websites aimed at the Web design community, these features can help you push the boundaries of modern Web design today, adding that extra spice to your design and helping the industry move forward.


Here are five techniques snatched from the future that you can put into practice in your website designs today.


1. Border Radius


Border-radius in Push Your Web Design Into The Future With CSS3


Probably the most common CSS3 feature currently being used is border-radius. Standard HTML block elements are square-shaped with 90-degree corners. The CSS3 styling rule allows rounded corners to be set.




  1. -moz-border-radius: 20px;

  2. -webkit-border-radius: 20px;

  3. border-radius: 20px;



Border-radius can also be used to target individual corners, although the syntax for -moz- and -webkit- is slightly different:



  1. -moz-border-radius-topleft: 20px;

  2. -moz-border-radius-topright: 20px;

  3. -moz-border-radius-bottomleft: 10px;

  4. -moz-border-radius-bottomright: 10px;

  5. -webkit-border-top-right-radius: 20px;

  6. -webkit-border-top-left-radius: 20px;

  7. -webkit-border-bottom-left-radius: 10px;

  8. -webkit-border-bottom-right-radius: 10px;


Supported in Firefox, Safari and Chrome.


2. Border Image


Border-image in Push Your Web Design Into The Future With CSS3


Border-image, as the name suggests, allows an image file to be used as the border of an object. The image is first created in relation to each side of an object, where each side of the image corresponds to a side of the HTML object. This is then implemented with the following syntax:



  1. border: 5px solid #cccccc;

  2. -webkit-border-image: url(/images/border-image.png) 5 repeat;

  3. -moz-border-image: url(/images/border-image.png) 5 repeat;

  4. border-image: url(/images/border-image.png) 5 repeat;



The {border: 5px} attribute specifies the overall width of the border, and then each border-image rule targets the image file and tells the browser how much of the image to use to fill up that 5px border area.


Border images can also be specified on a per-side basis, allowing for separate images to be used on each of the four sides as well as the four corners:



  1. border-bottom-right-image

  2. border-bottom-image

  3. border-bottom-left-image

  4. border-left-image

  5. border-top-left-image

  6. border-top-image

  7. border-top-right-image

  8. border-right-image


Supported in Firefox 3.1, Safari and Chrome.


3. Box Shadow and Text Shadow


Shadow in Push Your Web Design Into The Future With CSS3


Drop shadows: don’t you just love them?! They can so easily make or break a design. Now, with CSS3, you don’t even need Photoshop! The usage we’ve seen so far has really added to the design, a good example being this year’s 24 Ways website.



  1. -webkit-box-shadow: 10px 10px 25px #ccc;

  2. -moz-box-shadow: 10px 10px 25px #ccc;

  3. box-shadow: 10px 10px 25px #ccc;


The first two attributes determine the offset of the shadow in relation to the element, in this case, 10 pixels on the x and y axis. The third attribute sets the level of blurriness of the shadow. And finally, the shadow color is set.


Also, the text-shadow attribute is available for use on textual content:



  1. text-shadow: 2px 2px 5px #ccc;


Supported in Firefox 3.1, Safari, Chrome (box-shadow only) and Opera (text-shadow only).


4. Easy Transparency with RGBA and Opacity


Opacity in Push Your Web Design Into The Future With CSS3


The use of PNG files in Web design has made transparency a key design feature. Now, an alpha value or opacity rule can be specified directly in the CSS.



  1. rgba(200, 54, 54, 0.5);

  2. /* example: */

  3. background: rgba(200, 54, 54, 0.5);

  4. /* or */

  5. color: rgba(200, 54, 54, 0.5);


The first three numbers refer to the red, green and blue color channels, and the final value refers to the alpha channel that produces the transparency effect.


Alternatively, with the opacity rule, the color can be specified as usual, with the opacity value set as a separate rule:



  1. color: #000;

  2. opacity: 0.5;


Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes).


As used by: 24 Ways (RGBA).


5. Custom Web Fonts with @Font-Face


Font-face in Push Your Web Design Into The Future With CSS3


There has always been a set of safe fonts that can be used on the Web, as you know: Arial, Helvetica, Verdana, Georgia, Comic Sans (ahem…), etc. Now the @font-face CSS3 rule allows fonts to be called from an online directory and used to display text in a whole new light. This does bring up issues of copyright, so there are only a handful of specific fonts that can be used for @font-face embedding.


The styling is put into practice like so:



  1. @font-face {

  2. font-family:'Anivers';

  3. src: url('/images/Anivers.otf') format('opentype');

  4. }


The rest of the font family, containing secondary options, is then called as usual:



  1. h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;


Supported in Firefox 3.1, Safari, Opera 10 and IE7 (with lots of fixes: if you are brave enough, you can make font-face work in IE (thanks for heads up, Jon Tan))


As used by: TapTapTap.


Although CSS3 is still under development, the rules listed here are supported by some browsers right now. Safari in particular has extensive support for these new features. Unfortunately, despite being a top-quality browser, Safari has a relatively low number of users, so it is probably not worthwhile adding extra features solely for this group of users. But with Apple’s Mac computers making their way into everyday life, Safari’s usage is likely to continually increase.


Firefox, on the other hand, now has a considerably large user base. What’s more, the soon-to-be-released Firefox 3.1 has added support for a range of CSS3 features. Assuming that most users of Firefox will update their browsers, there will soon be a large group of users with support for these new styling rules.


Google Chrome was released this year. Based on the WebKit engine, this browser has much of the same support as Safari. While Safari makes up a good proportion of Mac users, Chrome has burst onto the scene, making up a decent proportion of Windows users.


Percentage-wise, the W3′s browser statistics indicate that, as of November 2008, 44.2% of W3School’s users across the Web were browsing with Firefox, 3.1% with Chrome and 2.7% with Safari. That means almost 50% of all Internet users should be able to view these features. Within the Web design community in particular, which is much more conscious of browser choice, the range of users with CSS3 support is much higher, at 73.6% (according to the stats at Blog.SpoonGraphics).


6. The downside


Your website may now have a range of fancy new design features, but there are a few negatives to take into consideration:



  • Internet Explorer: 46% of Internet users won’t see these features, so don’t use them as a crucial part of the design of your website. Make sure that secondary options are in place, such as a standard border in place of border-image and a normal font in place of @font-face. Please notice that Internet Explorer supports @font-face with EOT (more details) since v4 (thanks for heads up, Jon Tan).

  • Invalid style sheets: These CSS3 features have not been released as a final specification. They are currently implemented with tags that target different browsers. This can invalidate your style sheet.

  • Extra CSS markup: Following the last point, having to add a different tag for each browser to specify the same rule, as well as include the standard rule for the final CSS specification, adds a lot of extra code to your CSS markup.

  • Potentially horrific usage: Just as is done with traditional Photoshop filters, the use of these new styling features could result in some eye-wrenching designs. Drop shadows in particular ring warning bells for us; we’re not looking forward to seeing the Marketing Department’s choices with that one!

Monday, November 1, 2010

IE CSS Bugs That’ll Get You Every Time

ie-bug


IE 6 actually had the best CSS support of any browser when it first came out… SEVEN YEARS AGO. The little bugs in it’s CSS support still haunt us to this day. I still get comments from people who roundly reject any technique that doesn’t work in IE 6. While I generally refuse to pander to IE 6′s limitations, I still feel it is important to make things look right in it whenever possible. Here are that major bugs in IE that’ll get you every time:


The Box Model


This is perhaps the most common and frustrating bug of all in IE 6 and below. Let’s say you declare a box like this:



IE 6 will calculate the width of the box to be 100px.

Modern browsers will calculate the width of the box to be 124px.


This kind of discrepancy can cause HUGE layout problems. I even think the IE version makes a little bit more sense logically, but that is not how the spec was written. IE 6 can actually get it right if you are in standards-compliant mode, which is rare these days as just using an HTML 4.0 transitional doctype will trigger quirks mode and the box model problem.


I generally work around this issue by just not using padding on boxes I am using for layout. If that box has some text inside it in a <p> element, I’ll apply the padding it needs directly to that p element. Just side-steps the issue, but it works.


The Double Margin Bug


Using our box example from above, let’s say we need that floated to the right:



IE 6 will double the 20px to 40px. Again, causing potentially huge layout borks. The commonly thrown-around “fix” for this is to add “display: inline;” to the div. I’m not sure how this “fix” got so much traction, but its a bit impractical. We can’t set static widths on inline elements, now can we?


I also like to side-step this bug whenever possible. If you really need to push that box away from the right side of it’s parent element, you can likely do so by adding padding to the parent element, which is more likely to keep your grid consistent anyway. Also don’t forget about padding. This bug does not affect padding, so you can offen get away with adding padding to the side you need an achieve the same result.


No Min Widths / Min Height


Setting min-width and min-height on elements is such a natural and logical thing that it makes me tear up sometimes thinking I can’t count on them. IE 6 doesn’t just get it wrong, it just completely ignores them. Min-height is incredibly useful for something like a footer. Say your footer needs to be at least 100px tall because you are using a background image down there, but you don’t want to set a static height because you want it to grow nicely if, say, the text size is bumped up significantly. Min-height is perfect for this, but using it alone will get you no height whatsoever from IE 6. In a bizarre twist of luck, IE 6 treats the regular height property like modern browsers treat min-height, so you can use a “hack” to fix it. I call it a “hack”, because I don’t really consider it a hack since it validates just fine.


Stepdown


Normally when floating objects you can count on them lining up vertically until they break. That is, you could if you weren’t using IE 6. IE 6 appends a line break effect after each floated block element which will cause “stepdown”. The fix here is to make sure the line-height in the parent element is set to zero (0), or that the elements being floated are inline elements. More on preventing stepdown here.


No Hover States


Most modern browsers support hover states on just about any element, but not IE 6. IE 6 only support the hover pseudo-class on anchor (<a>) elements, andeven then you don’t get them if your anchor doesn’t have a href attribute. The solution here is to use a proprietary fix, or just deal with not having hover states on everything you want.


No Alpha Transparent PNG Support


Kind of funny that Microsoft themselves developed the PNG format, but their own browser doesn’t natively support it (until IE 7)*. I have a whole roundup of different fixes for this. Do remember that regular non-alpha transparent PNG files work fine without any fix in IE 6, and are often better than their GIF sisters.


*Update: I was totally wrong about the Microsoft thing, no idea how that got in my head. Tom Boutell actually developed the PNG format. Thanks all!


So…


All these bugs are either fixable or side-steppable, but they will get ya if you don’t do your testing. My general philosophy is: design with the most modern techniques possible, but then just make sure it ain’t busted in older ones.