display: block;

The CSS tag “display: block” is incredibly useful. Most web designers know about if for showing and hiding text using script (switching between display:none and display:block). It turns out, you also can’t set the width or height of an anchor without it.

I used that twice on this site: to create the pure css roll-over menubar (on the left) and to center the logo when printing a page.

To be more specific, when you have properly set your DOCTYPE, as in

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

then you can’t do this:

<a href=#" style="width: 100%;">Test</a>

Instead, you have to do this to get the desired effect:

<a href="#" style="display:block;width: 100%;”>Test</a>

Here’s a link that explains a really good way to make a rollover menu that depends on display: block, although it’s not exactly what I did:

Listamatic

This entry was posted on Friday, December 31st, 2004 at 2:23 pm and is filed under Business and Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

You must be logged in to post a comment.