Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>As pointed out by others, the concept of a vertical rule does not fit in with the original ideas behind the structure and presentation of HTML documents. However, these days (especially with the proliferation of web-apps) there are is a small number of scenarios where this would indeed be useful.</p> <p>For example, consider a horizontal navigation menu fixed at the top of the screen, similar to the menu-bar in most windowed GUI applications. You have several top-level menu items arranged from left-to-right which when clicked open up drop-down menus. Years ago, it was common practice to create this with a single-row table, but this is bad HTML and it is widely recognised that the correct way to go would be a list with heavily customised CSS.</p> <p>Now, say you want to group similar items, but add a vertical separator in between groups, to achieve something like this:</p> <pre><code>[Item 1a] [Item 1b] | [Item 2a] [Item 2b] </code></pre> <p>Using <code>&lt;hr style="width: 1px; height: 100%; ..." /&gt;</code> works, but may be considered semantically incorrect as you are changing what that element is actually for. Furthermore, you can't use this within certain elements where the HTML DTD allows only inline-level elements (e.g. within a <code>&lt;span&gt;</code> element).</p> <p>A better option would be <code>&lt;span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"&gt;&lt;/span&gt;</code>, however not all browsers support the <code>display: inline-block;</code> CSS property, so the only real inline-level option is to use an image like so:</p> <p><code>&lt;img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" /&gt;</code></p> <p>This has the added advantage of being compatible with text-only browsers (like lynx) as the pipe character is displayed instead of the image. (It still annoys me that M$IE incorrectly uses alt text as a tooltip; that's what the title attribute is for!)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload