CSS Menu Stepdown Issue

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.

If you are familiar with the concepts of “floats”, you know that if you float a page element to the left, that the next page element will move up next to that element on the right, if possible. But have you ever seen your floated elements “stepdown”?

This is a fairly common problem you can run into when creating a horizontal menu. Like most menus, you create an unordered list:

<ul id=”menu“>
<li><a href=”#”>My</a></li>
<li><a href=”#”>Little</a></li>
<li><a href=”#”>Menu</a></li>

You want the menu items to be large clickable blocks, so you write CSS like this:

ul#menu li a {
display: block;
width: 130px;
text-align: center;
font-weight: bold;
float: left;
color: white;
font-size: 1.2em;
text-decoration: none;
background: #600;

Those blocks are floated the left, so they should all line up in a row, right? Nope, that’s gonna get you some stepdown action. The problem is the list elements wrapping the anchor elements. These are also block-level elements but they are not floated. This confuses things, because block elements naturally have a break after them (like an invisible <br />). That pushes the next one down whatever the current line-height is, which is what causes the stepdown.

Here is the remedy:

ul#menu li {
display: inline; /* Prevents “stepdown” */

So the possible solutions for this problem are:

  • Setting those list elements as inline will take away those breaks and make sure your menu stays nice, happy, and straight!
  • Also, the problem is disappear if make line-height:0 to li elements
  • Another option would be to float the li elements instead of the links. This will also give you a little more control over the positioning/spacing of each li.

NB: This post is  simplified version of the post from http://css-tricks.com/prevent-menu-stepdown/?. Please refer the original site for more information.

How to suppress nagging javascript errors?

To suppress javascript error popups and warnings in your browser, just use the code snippet below:

<SCRIPT language=”JavaScript”>
function silentErrorHandler() {return true;}


This however has some limitation, from what i had experienced. It works well in IE, to a major extend in Firefox, but not much in Opera and Safari. Hence it would be advisable you use the jquery error handling in addition, to be on the safer side:


return true;


As far as i have seen, jquery error handling function works pretty well in all the browsers.

I would recommend you to use this only in the final production stage and not during development. Just for the simple fact that during development you would want to find the javascript errors.

Internet Explorer Bugs

Internet explorer is considered as the most widely used browser over the internet. However, this buddy comes up with some weird bugs in every version of it. I will be giving you a high level view of the bugs that IE has got. To get the indepth view of these bugs, i would recommend you to go through the following site.



  1. IE non-disappearing content Bug
  2. The IE8 noscript-ghost Bug
  3. The IE5/6 Doubled Float-Margin Bug
  4. IE6 Peekaboo Bug
  5. IE 6 duplicate character Bug
  6. IE & Expanding Box Bug
  7. Guillotine Bug
  8. The Float Model Problem
  9. Three Pixel Text Jog
  10. IE & Italics
  11. Inherited margins on form elements
  12. Quirky Percentages in IE6’s Visual Formatting Model
  13. IE/Win Line-height Bug
  14. Disappearing List-Background Bug
  15. Unscrollable Content Bug
  16. Duplicate Indent Bug
  17. Escaping Floats Bug
  18. Creeping Text Bug
  19. Missing First Letter Bug
  20. Phantom Box Bug

Well these are among the most widely found bug in IE.