Problems with CSS hover menus (drop-downs)

Problem: The browser supports :hover only on links, rather than on any element, thereby
making drop-downs like that in Chapter 5’s “Creating a drop-down menu” exercise fail.

Solution: Use some kind of JavaScript fallback system. There are various options for this,
but the simplest is the solution offered by Peter Nederlof at www.xs4all.nl/~peterned/
csshover.html. All you need to do is download either csshover.htc or csshover2.htc,
place it somewhere within your site’s hierarchy, and then link to it through a rule in a style
sheet linked via a conditional comment.
body {
behavior: url(csshover2.htc);
}
Another solution is to use HTML Dog’s Suckerfish Dropdowns (www.htmldog.com/
articles/suckerfish/dropdowns/), which works nicely all the way back to Internet
Explorer 5, and uses perfectly valid CSS.

Problems with iframes in Css

Problem: Internet Explorer spawns both horizontal and vertical scroll bars when content is
larger than the declared width or height. This means that if your iframe is 200 pixels high,
but your content is 400 pixels high, you’ll end up with a vertical scroll bar and a horizontal
one, even if your content is narrower than the iframe dimensions. Other browsers don’t
make this mistake, displaying only the relevant scroll bar. Also, styling iframes can cause
problems. Turning off the default border is a good move, because it looks clunky. Adding
a border using CSS should be possible by applying it directly to the iframe (via a class or
iframe tag selector); in practice, however, this partially fails in Internet Explorer versions 6
and below, creating an ugly gap between your scroll bars and iframe borders (which happens
to be the same size as the defined border).

Solution: If you know your iframe content is always going to be too large for the iframe,
set scrolling="yes" in the iframe start tag. Alternatively, add a conditional comment in
the head of the iframe content document, with the following code, experimenting with
the width property until the scroll bar disappears. If you use similar iframes on a number
of pages, you should instead assign a class value to the body element of the relevant pages
and define the html, body rule in an IE 6-and-below-specific style sheet.
<!--[if lte IE 6]>
<style type="text/css">
html, body {margin:0; width:180px;}
</style>
<![endif]-->
For border styles, you can work around the problem in one of two ways: you can override
the original border value, setting it to 0 for Internet Explorer 6 and below; or you can nest
the iframe in a div and provide the div with a border instead.