Saturday 25th of April 2015 02:25:56 PM

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: E

in Figure 9-22:

SPAN.change {position: absolute; top: static-position; left: -5em; width: 4em;font-weight: bold;}P {margin-left: 5em; position: relative;}<P> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut <SPAN CLASS="change">***</SPAN>laoreet dolore magna aliquam erat volutpat.</P>
Figure 9-22

Figure 9-22. Another approach to defining a "change bar"

Remember when we mentioned static-position much

element boxes: 7.1. Basic Element Boxes
8.1. Basic Boxes
element clipping: 9.1.4.3. Element clipping
element selectors: 2.1.1. Rule Structure
elements
classification of: 2.9. Classification of Elements
floated (see floated elements)
overlapping, altering: 9.5. Stacking Positioned Elements
styling common: 11.2.4. Styling Common Elements
visibility of: 9.1.5. Element Visibility
elevation property: 10.8.2. The Spoken Word
em box: 5.3. Font Size
em-height (em): 3.2.2.1. em and ex units
em length value: 5.3.3. Percentages and Sizes
em square: 5.3. Font Size
embedded style sheets: 1.4.2. The STYLE Element
ex-height (ex): 3.2.2.1. em and ex units
Extensible Markup Language (see XML)
external style sheets: 1.4.1. The LINK Tag
creating: 11.1.1. Case 1: Consistent Look and Feel
loading
with @import directive: 1.4.3. The @import Directive
with LINK element: 1.4.1. The LINK Tag
extra space around elements, adding: 7.2. Margins or Padding?
7.2. Margins or Padding?
(see also margins)


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.

A:link {border: 5px solid blue;}

If you don't set a large enough line-height to accommodate the border, it will be in danger of overwriting other lines, as shown in Figure 8-62.

Figure 8-62

Figure 8-62. Inline borders can be overlapped

One solution is to increase the line-height of the paragraph. This will affect every line in the entire element, not just the line in which the bordered hyperlink appears:

P:hover {font-weight: bold;}

Therefore, if you want to make sure your hover styles are appliedonly to your hyperlinks, you would need to use this rule:

A:link:hover {background: blue; color: white;}

The ability to combine pseudo-classes is a new feature of CSS2.

WARNING

InternetExplorer 4.x and 5.x bothwhatever line was changed. In that case, we need to make only onesmall alteration to our styles, and we'll get the result shownin Figure 9-22:

SPAN.change {position: absolute; top: static-position; left: -5em; width: 4em;font-weight: bold;}P {margin-left: 5em; position: relative;}<P> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut <SPAN CLASS="change">***</SPAN>laoreet dolore magna aliquam erat volutpat.</P>
dashed lines are for illustrative purposes only.) As Figure 7-7 demonstrates, 10 pixels of space are added toeach side of the content area. This is somewhat similar to using theHSPACE and VSPACE attributes inHTML. In fact, you can use margin to set extraspace around an image. Let's say you want 1 em of spacesurrounding all images:

IMG {margin: 1em;}

That's all it takes.

There may be times where you want a different amount of space on each