Wednesday 17th of September 2014 09:32:57 PM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

Symbols | A | B | C | D | E below the beginning of the document, or just far enough down to pushmuch of the background image beyond the bottom of the browser window,as shown in Figure 6-53.

Figure 6-53

Figure 6-53. The background image appears too low to be seen fully

Furthermore, even assuming that the background image is initiallyvisible, it always scrolls with the document. Perhaps you don'twant to see what Figure 6-54 depicts:

BODY {background-image: url(bigyinyang.gif);
| F
| G
| H
| I
| J
| K
| L
| M
| N
| O
| P
| Q
| R
| S
| T
| U
| V
| W
| X
| Y
| Z

Index: Y

There are no index entries for this letter.

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.

And what is the format of an external style sheet? It's simply a list of rules, just like those we saw in the previous section and in the example above, but in this case, the rules are saved into their own file. Just remember that no HTML or any other markup language can be included in the style sheet -- only style rules. Here's the markup of an external style sheet:

H1 {color: red;}
H2 {color: maroon; background: white;}
underlining for theB element. Navigator, Explorer, and Opera all dothis, if there is an explicit text-decoration:none to cause the suppression of underlining. Thisis, of course, what an author would tend to expect, and that'swhy the browsers do it.

Figure 4-61

Figure 4-61. How browsers really behave

The caveat here is that browsers (or any other user agents) might oneday follow the specification precisely. If you depend on using

Figure 4-44

Figure 4-44. Combining vertical alignments

If we change the text element so that it's text-bottom-aligned, though, the situation changes quite radically, as Figure 4-45 shows:

IMG {vertical-align: middle;}
SUB {vertical-align: text-bottom;}
Figure 4-45

Figure 4-45. Combining vertical alignments in a different way

If you resize the  browser window the image jumps around as the lines re-wrap.  Here's an in-line greyscale image with default settings and unpredictable placement on the page.  If you resize the browser window the image jumps around as the lines re-wrap.  In this case, the image is in the same directory as this HTML file, but you could reference an image in another directory by its relative or absolute path.  You can even specify the URL for an imagework -- so if you're still using a preview release,you'll need to upgrade it, which is probably a good ideaanyway. (Thanks to Howard Marvel for discovering and sharing thistrick.)