Why is the whole box not clickable in IE6 when using display: block to alter the appearance of links?

You can use display: block to turn a link into a block level element. This is useful if you want to display a series of links as a menu. You can alter an unordered list, for example, so that it appears to be a table containing links, and use the a:hover psuedo class to change the background colour when the mouse pointer hovers over the link. In such a situation you would want the whole box to behave like a link. In most browsers it does, however in IE only the linked word triggers the hover behaviour.

However, you can get around this by setting the width of the link to 100%. Your css might look something like this:-

#styleswitch ul li a {
color: #000066;
background-color: #FF9900;
display: block;
text-decoration: none;
font-weight: bold;
margin: 0px;
padding: 0px;
width: 100%;
}

This doesn't alter the behaviour in other browsers, and it makes it work as desired in IE. There may be situations where a setting of 100% will produce undesireable results, depending on the kind of element in which the links appears. In such cases, set the width to any value you desire in pixels - as long as a width is set it will still work as desired.