Thursday 23rd of October 2014 06:27:21 AM Let's set top and bottom borders on boldfaced text:

B {border-top: 10px solid gray; border-bottom: 5px solid silver;}

Once more, this is allowed in the specification, but it will have absolutely no effect on the line height. However, since borders are visible, they'll be drawn -- as you can see for yourself in Figure 7-51.

Figure 7-51

Figure 7-51. Borders on inline elements

The borders have to go somewhere. This is where they went.

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: Z

z-axis: 9.5. Stacking Positioned Elements
z-index property: 9.5. Stacking Positioned Elements

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

There is a potential danger here. Our floated images have a left margin of 2.5em, but if you'll recall, the column itself has a left margin of 10%. In a sufficiently narrow browser window, the left margin of the column could end up being much less than 2.5em. If that happens, then the images could get pushed far enough to the left that they go partway "offscreen." Mixing units like this, even indirectly, can be risky. A better choice might be this:

mathematically correct: 10 + 50 = 400. Even though this leads to a child element sticking out of its parent, technically the specification hasn't been violated, because the values of the seven properties add up to the required total. It's a semantic dodge, but it's valid behavior.

Let's consider another example, illustrated in Figure 8-20, where the left margin is set to be negative:

DIV {width: 400px; border: 1px solid black;}

While almost every browser that supports CSS will handle most values of text-align, they often fall down when handling justify. Navigator 4 does support justify, but it's fairly buggy -- it most often breaks down within tables. Internet Explorer 4.x does not support justify, while IE5 does, and Opera 3.6 supports it as well.