HTML and CSS Reference
In-Depth Information
Figure 9-9
The navigation links with no space between them.
Note that Internet Explorer versions 6 and 7 don't support
display: inline-block;
. However, they fortu-
nately treat
display: inline;
in the same way that other browsers—that better support the CSS specifica-
tion—treat
display: inline-block;
. So, when an element is required to be inline-block, you can simply spe-
cify the declaration
display: inline;
only for Internet Explorer 6 and 7. You learn how to create a stylesheet
specifically for the use of older versions of Internet Explorer in Chapter 15.
list-item
List items—the
<li>
elements that are placed within either ordered
<ol>
or unordered
<ul>
lists—have the de-
claration
display: list-item;
by default. When an element is a list-item, it generates a block box
and
a
marker box—if that element has a visual representation of being a list item in the form of a bullet point or other
graphical element. Styling lists are covered in Chapter 11.
Displaying Tables
When a page contains a table, using the HTML element
<table>
, it, by default, has the declaration
display:
table;
. Aside from the hack you saw in the preceding chapter, where
display: table;
was used to prevent
the margins of an element from collapsing (a trait of tables), and one other hack to achieve vertical align-
ment—which you see later in this chapter—
display: table;
tends to be used only for tables, suprisingly! Be-
cause the
<table>
element already has this display value written into user agent stylesheets, you most likely don't
need to use it in your own CSS. This, too, goes for the other table display values;
inline-table
,
table-row
,
table-row-group
,
table-header-group
,
table-footer-group
,
table-column
,
table-
group-column
,
table-cell
, and
table-caption
.
If you would like to find out more about these table values, see the CSS Table Model at
none
As you saw in Chapter 5, giving an element the declaration
display: none;
doesn't just hide that element; it
tells the browser not to even render it so that no box is generated at all and the layout is treated as though this ele-
ment doesn't exist—even though it's still present in the HTML.
If you would like to hide an element but still have it affect layout, see the
opacity
and
visibility
properties,
which were covered in Chapter 5.
position, top, right, bottom, and left
Initial value:
static
| Inherited: No | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 4+, Safari 1+
