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 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 .
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+
Search WWH ::

Custom Search