Releasing CSS

Figure 25. The Microsoft Box Model demonstrated in IE6 with quirks mode

Figure 26. The proper box model as demonstrated in IE7

IE7’s CSS Bug Fixes

The next sentence should be a very happy one for web designers: the numerous

bugs with the CSS implementations of IE6 have been fixed.

Take a deep breath and do a little jig or the cabbage patch in your chair. Go on. I

won’t tell anyone. Done? No? Well, you can continue it later.

The Bug That Survived

One bug that survived being squashed is the Escaping Floats Bug, as shown in

Figure 27.

Releasing CSS 36

Figure 27. The Escaping Floats Bug demonstrated in IE6

In IE7, the parent element wraps around more of the floating child elements, but

not all of them, as shown in Figure 28.

Releasing CSS 37

Figure 28. The Escaping Floats Bug demonstrated in IE7

A New Bug in IE7: Disappearing Content Bug

Recently a small, but slightly obnoxious, bug has surfaced. Web designer

Aleksander Vacic discovered this flaw in the IE7’s rendering of a navigation menu

bar. When building a stacked navigation menu bar with nested lists, IE7 hides the

secondary navigation menu as shown in Figure 29.

Figure 29. Missing navigation elements in the bottom, red row

The error comes from one CSS rule:

ul.navig li:hover a {

color: #000;

background-color: #ff4500;

}

It’s a bug similar to the IE6 Peekaboo Bug, where content seems to be hidden. The

problem seems to result from an element having a background color or a

Releasing CSS 38

background image specified no matter if the CSS property being used is

background-color, background-image, or the background shorthand.

To solve the navigation problem, split up the CSS rule into two rules. First, put the

background color rollover effect onto the parent item. In this case it’s the list item:

ul.navig li:hover {

background-color: #ff4500;

}

Then set the color the link text to black when the rollover effect is triggered on the

list item: ul.navig li:hover {

background-color: #ff4500;

}

ul.navig li:hover a {

color: #000;

}

This corrects the problem, as seen in Figure 30:

Figure 30. The fixed navigation menu bar in IE7

For more information on the bug, see Vacic’s blog at http://tinyurl.com/y75k96.

Rollovers on Block-Level Elements

Web surfers and designers are familiar with rollover effects on links or buttons in

navigation menus:

a:link {

color: blue;

}

a:visited {

color: purple;

}

a:hover {

color: red;

}

a:active {

color: gray;

}

Only in certain less popular browsers than IE could developers apply rollover

effects on other inline and block-level elements. Let’s look at an example of a

block-level element as shown in Figure 31:

p {

line-height: 1.5;

font-family: Verdana, sans-serif;

padding:2px;

font-size:1.2em;

Releasing CSS 39

}

p:hover {

color: blue;

}

Figure 31. The bottom paragraph turns blue

With additional support in IE7, it’s now possible to create a more engaging user

interface with subtle effects. Imagine applying styles not only to links that a user

might roll over, but also to the entire paragraph or div element in which the link is

encapsulated.

Also Fixed in IE7 at No Extra Charge

IE7 has extended the CSS support for the W3C standard. Some of those additions

include interesting effects that could make designs more dynamic. Additions

include:

• Background images can stay fixed when scrolling thanks to support for the

background-attachment property (see

http://www.w3.org/TR/CSS21/colors.html#propdef-background-

attachment

).

• Max-width, min-width, max-height, and min-height are now supported.

Developers can now place lower and upper limits on the width (see

Releasing CSS 40