Tuesday 03rd of May 2016 08:46:41 AM

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

oblique text: 5.4.1. Fonts with Style
octothorpe (#) preceding ID selectors: 2.3.2. ID Selectors
offsets (see side-offset properties)
Opera
CSS implementation in: 1.3.2. Implementations
padding and: 7.5.4. Padding: Known Issues
padding values, negative: 7.5. Padding
operating system, colors and: 10.5.2. Colors
order sorting: 2.8. The Cascade
ordered lists: 7.7.1. Types of Lists
7.7.2. List Item Images
origin image: 6.2.3.3. Length values
origin sorting: 2.8. The Cascade
origins: 2.8. The Cascade
orphans property: 10.8.1. Paged Media
outline properties: 10.5.3. Outlines
overflow: 9.1.4. Content Overflow and Clipping
overflow-clip property: 9.1.4.2. Overflow clipping
overflow clipping: 9.1.4.2. Overflow clipping
overflow property: 9.1.4.1. Overflow
overlapping
elements, altering: 9.5. Stacking Positioned Elements
floated elements, preventing: 8.3.1. Floating: The Details
margins (see collapsing margins)
text, preventing: 8.4.3. Managing the Line Height of Inline Elements
overlining: 4.1.6. Text Decoration
overriding previously declared values: 11.1.3. Case 3: Putting a Magazine Article Online


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 border-style: none none solid;border-color: gray;}

Neither is really convenient, given all the typing involved.Fortunately, a better solution is available:

H1 {border-bottom: thick solid gray;}

This will apply the values to the bottom border alone, as shown inFigure 7-45, leaving the others to their defaults.Since the default border style is none, no bordersappear on the other three sides of the element.

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

<P>This paragraph contains <SUB>subscripted</SUB> text.</P>
Figure 4-32

Figure 4-32. Subscript alignment

Of course, you could make the text smaller by using font-size, but you have to do it yourself.

super acts in a fashion similar to sub, but in this case, the element's baseline (or bottom of a replaced element) is raised with respect to the parent's baseline. Again, the distance the text will be raised is dependent on the user agent, and there is no implied change

Then there is the question of what happens to elements that flow past a floated element but have visible backgrounds. Let's take the preceding example and change it so that the second H3 element has a visible background and border, as has been done in Figure 7-69.

Figure 7-69

Figure 7-69. More floating images and element backgrounds

Yes, the figure is correct: the content of the H3 flows past the image, and the background "slides under" the image, so to speak. This is, in its way, no different than thesidebarwith current options, and the record display itself -- it'sstructured around a table, with each area being enclosed in a tablecell. In addition, there is a fourth table cell between the sidebarand the main part of the page, in order to create some blank space.There are also a lot of FONT tags and a few tablesimbedded within the main table that determines the page'slayout. The skeleton of the page is expressed as a table, with aborder and cell padding added to make the structure more clear:

{clear: left;}. This can be translated as "make sure that the left side of an H2 is clear of floating images" and is a replacement for the HTML construct <BR clear="left">. Figure 7-74 shows the following declaration, which uses clear to prevent H2 elements from flowing past floated elements to the left side:

<P>The image in this paragraph <IMG SRC="test.gif" ALT="test image">will be raised 9px.</P>

The inherited value of line-height is what causesthe image to be raised nine pixels, instead of some other number.Without a value for line-height, it wouldn'tbe possible to perform percentage-value vertical alignments. Theheight of the image itself has no relevance when it comes to verticalalignment: the value of line-height is all thatmatters.