Lecture 20: Display, Overflow, White Space, and Cursor

Overview:

  1. display Property
  2. overflow Property
  3. Minimum and Maximum Widths and Heights
  4. white-space Property
  5. cursor Property

display Property

Property Usage and Effect Values Accepted Recommendations
display Determines how an element is rendered.

In (X)HTML elements have pre-defined rendering (that you can override), but in XML the display property defaults to inline.		 Mouse over the value for details:

block | inline | none | list-item

There are many other values for this property, especially table-related display values, but they have limited browser support (IE in particular lacks support).		 This property is not inherited (inner tags will not pick it up from outer tags), although instructing a parent to 'display: none' will cause all children and descendants to be removed from rendering.

Windows IE 5.x lacks support for the 'list-item' display.

Test cross-browser and cross-platform when displaying as list-item.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Display</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, h1, h2 {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 18px;}
    h2 {font-size: 14px;}
    .inline {display: inline;}
    --></style>
</head>
<body>

<h1 class="inline">A Level 1 heading, displayed inline</h1>
<h2 class="inline">Ordinarily this Level 2 heading would be on its
own line, but both it and the heading above are displayed inline</h2>

</body>
</html>

See how this example renders

overflow Property

Property Usage and Effect Values Accepted Recommendations
overflow Determines how content is rendered (and how the block-level element responds) when the content exceeds the dimensions of the block-level element. Mouse over the value for details:

visible (the default) | hidden | scroll | auto		 This property is not inherited (inner tags will not pick it up from outer tags).

When defaulting to 'visible' IE 6 and below will extend the height and border to hold the content if the height property is specified.

Other browers (including IE 7) allow the content to go past the height, through the border, and move into the bottom margin of the element.

This is not a concern if the dimension where scrolling will occur (height or width) is not specified.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Overflow</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    div {border: 1px solid #000; width: 200px; height: 100px;
         margin-bottom: 85px;}
    .hidden {overflow: hidden;}
    .scroll {overflow: scroll;}
    .auto {overflow: auto;}
    --></style>
</head>
<body>

<div>
If there is enough content then it should exceed the height of this div
and keep going, but IE 6 and below extend the box to hold it.
<p>In other browsers this will go outside the border and into the bottom
margin.</p>
<p>For those browsers this text should be outside the border.</p>
</div>

<div class="hidden">
If there is enough content then it should exceed the height of this div
and be hidden.
<p>If there is enough content then it should exceed the height of this
div and be hidden.</p>
<p>If there is enough content then it should exceed the height of this
div and be hidden.</p>
</div>

<div class="scroll">
There should be a scrollbar always visible, even if it is not active.
</div>

<div class="auto">
Given enough content, a scrollbar will be triggered.
<p>Given enough content, a scrollbar will be triggered.</p>
<p>Given enough content, a scrollbar will be triggered.</p>
</div>

</body>
</html>

See how this example renders

Minimum and Maximum Widths and Heights

Property Usage and Effect Values Accepted Recommendations
min-height Determines the minimum height for the element. The element can become taller, as content requires.

In situations where the height value is less than the min-height, then the min-height value becomes the height value.

There is no support in IE 5.x & 6 for min-height. 		Number and unit (e.g., px, em, %) The lack of IE 5.x & 6 support is the major issue (the browser treats height as min-height).
max-height Determines the maximum height for the element.

In situations where the height value is greater than the max-height, then the max-height value becomes the height value.

In situations where min-height exceeds max-height, then the max-height becomes the min-height value.

There is no support in IE 5.x & 6 for max-height. 		Number and unit (e.g., px, em, %) The lack of IE 5.x & 6 support is the major issue.
min-width Determines the minimum width for the element. The element can become wider, as content requires.

In situations where the width value is less than the min-width, then the min-width value becomes the width value.

There is no support in IE 5.x & 6 for min-width. 		Number and unit (e.g., px, em, %) The lack of IE 5.x & 6 support is the major issue (the browser treats width as min-width).
max-width Determines the maximum width for the element.

In situations where the width value is greater than the max-width, then the max-width value becomes the width value.

In situations where min-width exceeds max-width, then the max-width becomes the min-width value.

There is no support in IE 5.x & 6 for max-width. 		Number and unit (e.g., px, em, %) The lack of IE 5.x & 6 support is the major issue.

 

white-space Property

Property Usage and Effect Values Accepted Recommendations
white-space Determines how spaces in element content are rendered. Mouse over the value for details:

normal (the default) | pre | pre-wrap | pre-line | nowrap | inherit 		The 'pre-wrap' and 'pre-line' values are newer (part of the CSS 2.1 Working Draft, which is not finalized) and therefore will not validate.

Windows IE 5.01 lacks support.

Windows IE 5.5 supports 'nowrap' only.

Windows IE 6 & 7, Safari, and Gecko-based browsers support 'pre' and 'nowrap' only. A proprietary property for Gecko-based browsers gives 'pre-wrap' support, since CSS 2.1 is not finalized.

Opera supports all but 'pre-line'

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: White-Space</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    .pre {white-space: pre;}
    .prewrap {white-space: pre-wrap;}
    .preline {white-space: pre-line;}
    .nowrap {white-space: nowrap;}
    --></style>
</head>
<body>

<p class="pre">Spacing    has    been    preserved    here</p>

<p class="prewrap">Spacing    is    also    preserved
as    well
as   line    breaks</p>

<p class="preline">Spacing    should    not    be    preserved    but
the    line    breaks    are    shown</p>

<p class="nowrap">This line of text should not wrap, given the styling.
This line of text should not wrap, given the styling.
This line of text should not wrap, given the styling.
This line of text should not wrap, given the styling.
This line of text should not wrap, given the styling.
This line of text should not wrap, given the styling.</p>

</body>
</html>

See how this example renders

cursor Property

Property Usage and Effect Values Accepted Recommendations
cursor Determines the cursor used when an element is moused over. Mouse over the value for details:

Commonly supported in modern browsers (CSS2):
default | auto | crosshair | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help |

CSS2.1 and CSS3 (supported in IE 6 & 7 and Gecko-based browsers; Opera 9 and Mac IE 5.x support 'progress'):
progress | not-allowed | no-drop | vertical-text | all-scroll | col-resize | row-resize

IE and Latest Gecko-Based Browsers: url(filename)

Proprietary (works in Windows/Mac IE and Opera; will not validate): hand 		The 'help' cursor is sometimes used for elements with a descriptive title attribute, such as <acronym> or <abbr>

Safari and Windows/Mac IE 5.x display the directional resize cursors as single-direction arrows rather than being double-sided.

Multiple custom graphical cursors can be specified, separated by commas. Be sure to give a generic cursor as the last option, in case none of the others can be found or used.

Custom cursors are typically in .cur file format; the latest Gecko-based browsers also support .png and .gif; IE 6 & 7 have support for .ani files but can run into issues

Be careful of the 'wait' and 'progress' cursors, as users expect something to be occurring if they see those cursors.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Cursor</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    .default {cursor: default;}
    .auto {cursor: auto;}
    .crosshair {cursor: crosshair;}
    .pointer {cursor: pointer;}
    .move {cursor: move;}
    .e-resize {cursor: e-resize;}
    .ne-resize {cursor: ne-resize;}
    .nw-resize {cursor: nw-resize;}
    .n-resize {cursor: n-resize;}
    .se-resize {cursor: se-resize;}
    .sw-resize {cursor: sw-resize;}
    .s-resize {cursor: s-resize;}
    .w-resize {cursor: w-resize;}
    .text {cursor: text;}
    .wait {cursor: wait;}
    .help {cursor: help;}
    .hand {cursor: hand;}
    .progress {cursor: progress;}
    .not-allowed {cursor: not-allowed;}
    .no-drop {cursor: no-drop;}
    .vertical-text {cursor: vertical-text;}
    .all-scroll {cursor: all-scroll;}
    .col-resize {cursor: col-resize;}
    .row-resize {cursor: row-resize;}
    --></style>
</head>
<body>

<p class="default">Mouse over this text to see a default cursor</p>

<p class="auto">Mouse over this text to see an auto cursor</p>

<p class="crosshair">Mouse over this text to see a crosshair cursor</p>

<p class="pointer">Mouse over this text to see a pointer cursor</p>

<p class="move">Mouse over this text to see a move cursor</p>

<p class="e-resize">Mouse over this text to see an e-resize cursor</p>

<p class="ne-resize">Mouse over this text to see a ne-resize cursor</p>

<p class="nw-resize">Mouse over this text to see a nw-resize cursor</p>

<p class="n-resize">Mouse over this text to see an n-resize cursor</p>

<p class="se-resize">Mouse over this text to see an se-resize cursor</p>

<p class="sw-resize">Mouse over this text to see an sw-resize cursor</p>

<p class="s-resize">Mouse over this text to see an s-resize cursor</p>

<p class="w-resize">Mouse over this text to see a w-resize cursor</p>

<p class="text">Mouse over this text to see a text cursor</p>

<p class="wait">Mouse over this text to see a wait cursor</p>

<p class="help">Mouse over this text to see a help cursor</p>

<p class="hand">Mouse over this text to see a hand cursor</p>

<p class="progress">Mouse over this text to see a progress cursor</p>

<p class="not-allowed">Mouse over this text to see a not-allowed
cursor</p>

<p class="no-drop">Mouse over this text to see a no-drop cursor</p>

<p class="vertical-text">Mouse over this text to see a vertical-text
cursor</p>

<p class="all-scroll">Mouse over this text to see an all-scroll cursor</p>

<p class="col-resize">Mouse over this text to see a col-resize cursor</p>

<p class="row-resize">Mouse over this text to see a row-resize cursor</p>

</body>
</html>

See how this example renders