Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156
2008 June | Expressing IT

Archive for June, 2008

White Space Bug in Line/List Items(li) in IE6

Friday, June 20th, 2008 By Nikhil

If you  have ever made ( or making one) a Vertical Menu using list items( li) tags and CSS, you  might encounter, this yet another bug in Internet Explorer, where IE 6 inserts these gaps between list items that contain block level elements, i.e. if there is any whitespace between the list items in the markup.  Thanks, but no thanks , the IE version 7  seems free from this bug.
If like me , and many more, you  belong to this  band of frustrated developers , who still have to get their new layouts , working in IE6 too, then this might prove useful . Have a look…

Sample markup:

<ul id=”menu”>
<li ><a href=”#”>Home</a></li>
<li ><a href=”#”>About</a></li>
<li ><a href=”#”>Services</a></li>
<li ><a href=”#”>Portfolio</a></li>
<li ><a href=”#”>FAQ</a></li>
<li ><a href=”#”>Contact Us</a></li>
</ul>

You might create some CSS , similar to one below, to transfrom the above  markup into a vertical menu ….

Sample CSS…
#menu {
margin: 0;padding: 0;background: #FF9900;
list-style-type: none;width: 150px;
}
#menu li {margin: 0;padding: 0;}
#menu  a {display: block;
color: #555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;
}

The results you will see…
null

Solution for this bug…(modified/added CSS in bold italics)

#menu {
   margin: 0;padding: 0;background: #FF9900;list-style-type: none;width: 150px;
  float: left; /* this contains floated list items */
}
#menu li {
    margin: 0;padding: 0;
   float: left;      /* This fixes the */
   width: 100%;  /*  whitespace bug in IE6 */
}
#menu a {
   display: block; color: #555555;
   text-decoration: none;
   padding: 0 15px;
   line-height: 2.5; border-bottom:1px solid #FFF;
}

If the above solution doesnot seem to work (for reasons known to IE6 only)… try this method instead

Just add this additional IE6 only styles to your markup …

<!–[if lt IE 7>
<style type=”text/css”>
#menu li a {display:inline-block;}
#menu li a {display:block;}
</style>
<![endif]–>


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Best Practices: Keep the Number of DOM Elements Small

Friday, June 6th, 2008 By Nikhil

More the DOM elements on the page, slower it renders, slower is the DOM access in JavaScript’s. A high number of DOM elements can be due bad layout design. For instance, nested tables might have been used for layout purposes. Use any HTML Tag where is makes sense semantically. For E.g. DONOT use tables for layouts, but DONOT hesitate to use them where you have to display tabular data, and hence will use reduce DOM elements, in comparison, to a similar structure created using DIVs only..

To test the number of DOM elements in your HTML page, just type the following in the Firebug’s console:document.getElementsByTagName('*').length

There is no set standard as to how many DOM elements are too many. Check other similar pages that have good markup.Eg. Yahoo! Home Page is a pretty busy page and still under 700 elements (HTML tags).


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Best Practices: Using AJAX

Monday, June 2nd, 2008 By Nikhil

Use GET for AJAX Requests

It has been found that when using XMLHttpRequest, POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it’s best to use GET, which only takes one TCP packet to send (unless you have a lot of cookies). The maximum URL length in IE is 2K, so if you send more than 2K data you might not be able to use GET.
An interesting side affect is that POST without actually posting any data behaves like GET. GET is meant for retrieving information, so it makes sense (semantically) to use GET when you’re only requesting data, as opposed to sending data to be stored server-side.

Avoid Synchronous AJAX Calls

When making “Ajax” requests, you may choose either async or sync mode. Async mode runs the request in the background while other browser activities can continue to process. Sync mode will wait for the request to return before continuing.
Requests made with sync mode should be avoided. These requests will cause the browser to lock up for the user until the request returns. In cases where the server is busy and the response takes a while, the user’s browser (and maybe OS) will not allow anything else to be done. In cases where a response is never properly received, the browser may continue to block until the request is timed out.
If you think that your situation requires sync mode, it is most likely time to re-think your design. Very few (if any) situations actually require Ajax requests in sync mode.


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter