HTML and CSS Reference
In-Depth Information
#tab1, #tab2, #tab3 {
/* layout of the tab divisions */
display: none;
position: absolute;
margin-top: 2px;
/* tweak to overlay and align the tab */
width: 85%;
z-index: -1;
}
div.tabbed-content {
/* styles for the tab divisions */
background-color: #eef;
padding: 1em .5em;
border: thin solid;
}
</style>
he CSS for the tab labels is nothing new. he only quirk is in the setting of
rounded corners on the tops of the tabs but not the bottoms. hese rules:
-moz-border-radius: 7px 7px 0 0;
/* Mozilla: Firefox, Flock */
-webkit-border-radius: 7px 7px 0 0;
/* WebKit: Chrome, Safari */
-khtml-border-radius: 7px 7px 0 0;
/* Opera */
are for older browser versions that do not yet support the CSS3
border-radius
property. Microsot's Internet Explorer browser versions earlier than IE9 do
not support rounded corners. he rest of the code will still work, but the tabs
will be square in IE.
he two rules for the “tabbed”
section
element deine it as a relatively
positioned block element. A
section
element must be declared as block in
order to work properly in older browsers that do not fully support HTML5.
It must be given relative positioning to deine it as the containing element for
the absolutely positioned child elements (see the section “CSS Positioning” in
Chapter 3). Although relatively positioned, the section's location on the page is
the same as it would otherwise be, since the ofset properties are set to “auto.”
Without the relative positioning rule, the three content divisions would appear
in the top-let corner of the browser's window, covering the level-three head-
ing, instead of within the page content, where we want them to be.
he CSS for the tabbed divisions is in two statements. he irst addresses
the three divisions by their
id
attributes to deine the layout requirements.
he second statement addresses them by their common
class
attribute and
