by Trenton Moss
Examples of block elements include <div>, <p>, <h1>, <form>, <ul>, and <li>. Inline elements on the other hand have the opposite characteristics:
Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>.
To change an element's status you can use display: inline or display: block. But what's the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you
might hardly ever use this, but in actual fact this is a very powerful technique, which you can use any time you want to:
The first width command is read by all browsers; the second by all browsers except IE 5.x on PC. Because the second command comes second it takes precedence over the first - any command that comes second will always override a preceding command. So, how does all this work?
By placing empty comment tags (/**/) before the colons, IE 5.0 will ignore the command. Likewise, by placing these empty comment tags after the colon, IE 5.5 will ignore the command. By using these two rules in conjunction with each other, we can hide the command from all of IE 5.x.
Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this work in this browser. First, we'll insert a <div> under the <body> tag, as we can't assign a minimum width to the <body>:
<body>
<div id="container">
Next we create our CSS commands, so as to create a minimum width of 600px:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note though, this command will cause your CSS document to invalidate so you may prefer to insert it into the head of each HTML document to get round this.
You might also want to combine this minimum width with a maximum width:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
This can cause problems, because we may need boxes to be resizable should more text need to go in them or should the user resize text. If we only use the width and height commands on a box then non-IE browsers won't allow the box to resize. If we only use the min-width and min-height commands though then we can't control the width or height in IE!
This can be especially problematic when using background images. If you're using a background image that's 80px wide and 35px high, then you'll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text then the box size will need to expand gracefully.
To resolve this problem, you can use the following code for a box with class="box":
.box
{
width: 80px;
height: 35px;
}
html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
All browsers will read through the first CSS6 rule but IE will ignore the second rule because it makes use of the child selector command. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.
This command is incredibly useful to help ensure consistency in style across an entire website, particularly if there a number of content editors. Say for example your style guide dictates that words in headings must always begin with capital letters. To ensure that this is always the case, use text-transform: capitalize. Even if site editors forget about the capitalisation, their mistake won't show up on the website.
It's also preferable to use text-transform: uppercase to capitalise words, as screen readers may pronounce shorter words in capital letters as acronyms. A great example of this is 'CONTACT US', which is pronounced as 'contact U S' by some screen readers.
This problem mostly occurs on background images and on text next to a floated element. To remedy the problem, simply insert position: relative into the CSS command for the disappearing element, and for some bizarre reason that'll usually fix the problem. If this doesn't work (it sometimes doesn't), assign a width to the offending element in the CSS and that should fix the problem.
You may also want to make text invisible if using a print or handheld CSS file, as some information may not need to be displayed on either of these mediums (see below for more on this).
To make text invisible you can use display: none - easy! This works fine for hiding text from handhelds (if CSS is supported) and printed web pages, but isn't so great for many screen readers. Screen readers are now becoming too clever for their own good, and some will actually ignore the any text that has the rule display: none assigned to it.
For screen readers users therefore, a new approach is needed: position: absolute; left: -9000px. This basically takes the text and positions it 9000px to the left of the left edge of the screen, essentially making it invisible.
The following command is used to call up the CSS document for handhelds:
<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />
CSS commands in the handheld CSS file override any equivalent commands in the main CSS document. So, what commands should you place in this file?
Ideally, you want handheld web users to avoid having to scroll across. To test this, open up your website in a regular browser window and resize it to 150px in width. Then, open up your main CSS file and insert some new commands at the very bottom of the document. The commands you place here should adjust the layout of the website so that it doesn't require horizontal scrolling at a 150px width. Then, open up a new document, cut and paste these new commands over, and save it as handheldstyle.css (or whatever name you want to give it).
What your website offers to handheld web users should be quite different to what it offers on traditional web browsers, as the user experience is quite different. For further information, a book such as Handheld Usability is a great read.
The main CSS commands you'll need are:
a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
Aside from these commands, you can insert any other commands to achieve the desired presentation effect - the only limit is your imagination!
First of all, you'll need to assign a class to each navigation item:
<ul>You'll then need to insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section. When in 'Home' it should read <body id="home">, in 'About Us' it should be <body id="about"> and in 'Contact Us' <body id="contact">.
Next, you create a new CSS rule:
#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
}
This basically creates a rule that only takes effect when class="home" is contained within id="home", and when class="about" is in id="about" and class="contact" is in id="contact". These situations will only occur when the user is in the appropriate site section, seamlessly creating our highlighted navigation item.
About the author
This article was written by Trenton Moss. Trenton's crazy about web usability and accessibility - so crazy that he went and started his own web usability and
accessibility consultancy, Webcredible to help make the internet a better place for everyone. He knows an awful lot about intranet
usability and spends much of his time conducting accessibility evaluations of websites.
Send a comment about this article to editor@itwales.com.