Christopher SchmittCSSCookbookQuick Solutions to Common CSS ProblemsCoversCSS 2.1This is the Title of the Book, eMatter EditionCopyright © 2004 O’Reilly & Associates, Inc. All rights reserved.38Chapter 2CHAPTER 2Page Elements2.0 IntroductionFrom the most obvious design elements, such as the font and leading used in para-graphs and headings, to those that are often overlooked, such as the size of the mar-gins, every element you place in the layout of a web page adds to the intendedmessage of the content being displayed.This chapter covers the page elements that comprise a web page. Page elements areitems that affect the appearance of a web page, but aren’t necessarily a part of thepage. For example, a border around the viewport, the area of a web page that is seenby the user in the web browser, is a page element.By manipulating elements such as the margins and borders surrounding a web page,you effectively frame the content of the page without actually styling the content.Such simple changes can affect the page’s overall design in a profound way, or theycan add that final, subtle detail that completes the design.2.1 Eliminating Page MarginsProblemYou want to get rid of the whitespace around the edges of a web page and betweenthe browser chrome and the contents of the page, as shown in Figure 2-1.SolutionSet the value of the margin and padding properties for the html and body elements to 0:html, body { margin: 0; padding: 0; position: absolute;This is the Title of the Book, eMatter EditionCopyright © 2004 O’Reilly & Associates, Inc. All rights reserved.Eliminating Page Margins|39 top: 0; left: 0;}DiscussionSetting the margin and padding properties of the body element to 0 helps create a full-bleed effect—in other words, it eliminates the whitespace around a web page (theunits in this case don’t matter). And setting theposition to absolute and the valuesfortop and left to 0 helps remove the body margins in Netscape Navigator 4.However, depending on the content of the web page, themargin and padding proper-ties might not be all you need to change to get a full-bleed effect. Default propertieson other elements can have unexpected side effects when attempting to change thepage margin For example, ifh1 is the body element’s first child element, some unin-tended whitespace will appear above the headline and below the top of the browser’sviewport. Figure 2-2 shows this undesired effect; the background color of the head-ings and paragraphs is gray so that you can more clearly see the effect.To ensure the full-bleed effect in this situation you should set the margin and pad-ding of the offending element (in this case,h1, h2, h3)to0 as well as the body. Thissets all the sides of the element’s padding to0. If that setup isn’t possible (for exam-ple, you need to have a value at the bottom padding or margin), set themargin-topand padding-top values to 0 to maintain the full-bleed effect:body { margin: 0; padding: 0;Figure 2-1. Page margins visible as the whitespace around the edges of a web pageThis is the Title of the Book, eMatter EditionCopyright © 2004 O’Reilly & Associates, Inc. All rights reserved.40|Chapter 2: Page Elements}h1, h2, h3 { margin-top: 0; padding-top: 0; background-color: #666;}p { background-color: #999;}As you can see in Figure 2-3, this accomplishes the full-bleed effect. Notice how thegray background color of the first heading now touches the top of the browser’sviewport.See AlsoRecipe 7.2 for writing one-column layouts by setting the margin and padding proper-ties to a value other than0.2.2 Coloring the ScrollbarProblemYou want to adjust the color of the scrollbar on a browser’s viewport, or the windowon the browser.Figure 2-2. Whitespace above the heading and below the top of the browser’s viewportThis is the Title of the Book, eMatter EditionCopyright © 2004 O’Reilly & Associates, Inc. All rights reserved.Coloring the Scrollbar|41SolutionUse the properties that manipulate scrollbar colors in browsers that support it:body,html { scrollbar-face-color: #99ccff; scrollbar-shadow-color: #ccccff; scrollbar-highlight-color: #ccccff; scrollbar-3dlight-color: #99ccff; scrollbar-darkshadow-color: #ccccff; scrollbar-track-color: #ccccff; scrollbar-arrow-color: #000033;}Because these properties aren’t part of the W3C recommendations forCSS, browser vendors don’t have to put in support for these proper-ties. This Solution works only on the KDE Konqueror browser and onInternet Explorer 5.5+ for Windows. Other browsers will skip over therules as though they weren’t there. These rules won’t be validated byservices such as http://jigsaw.w3.org/css-validator/validator-uri.html.DiscussionAlthough you might think of a scrollbar as a simple tool, it’s actually composed ofseveral widgets that create a controllable 3D object. Figure 2-4 spotlights the differ-ent properties of a scrollbar. As you can see, to create a truly different color schemefor the scrollbar, you must alter the value of seven properties.Figure 2-3. Whitespace removed above the headingThis is the Title of the Book, eMatter EditionCopyright © 2004 O’Reilly & Associates, Inc. All rights reserved.42|Chapter 2: Page ElementsIn addition to adjusting the scrollbar of the browser viewport, you also can adjust thecolors of the scrollbar in thetextarea for a web form, framesets, iframes, and gener-ally anything with a scrollbar:.highlight { scrollbar-face-color: #99ccff; scrollbar-shadow-color: #ccccff; scrollbar-highlight-color: #ccccff; scrollbar-3dlight-color: #99ccff; scrollbar-darkshadow-color: #ccccff; scrollbar-track-color: #ccccff; scrollbar-arrow-color: #000033;}<form> <textarea class="highlight"></textarea></form>When rendering a page that doesn’t contain a valid DOCTYPE, Internet Explorer forWindows experiences what is known as quirks (nonstandard behavior) mode andlooks for the scrollbar properties in thebody selector. When the page contains a validFigure 2-4. The parts of a scrollbar that can be affected by proprietary CSS for Internet Explorerfor WindowsScrollbar-highlight-colorScrollbar-face-colorScrollbar-3dlight-colorScrollbar-3dshadow-colorScrollbar-darkshadow-colorScrollbar-track-colorScrollbar-arrow-colorThis is the Title of the Book, eMatter EditionCopyright © 2004 O’Reilly & Associates, Inc. All rights reserved.Centering Elements on a Web Page|43DOCTYPE, Internet Explorer for Windows is in Standards mode and it obeys thehtml selector. So, just in case the