Ten more CSS tricks you may not know
- Author: Web Credible
- Date: May 2006
- Link to Full Article
1. Block vs. inline level elements
Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:
- Always begin on a new line
- Height, line-height and top and bottom margins can be manipulated
- Width defaults to 100% of their containing element, unless a width is specified
2. Another box model hack alternative
The box model hack2 is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. A number of CSS-based solutions have been put forward to remedy this, so here's another one which we really like:
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
3. Minimum width for a page
A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page...
4. IE and width & height issues
IE has a rather strange way of doing things. It doesn't understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height - go figure!...
5. Text-transform command
One of the lesser known, but really useful CSS commands is the text-transform command. Three of the more common values for this rule are: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word capitals.
6. Disappearing text or images in IE?..
IE has a very strange bug where text or background images sometimes disappears from sight. These items are still actually there, and if you highlight everything on screen or hit refresh they'll often re-appear. Kind of strange, huh?...
7. Invisible text
Sometime you may actually want to make text invisible. Invisible text can be especially useful for screen reader users, perhaps to assign a label to a form item or insert a heading ahead of a section. Don't want to change the visual appearance by inserting these? Make them invisible and no one using a visual browser knows that they're there...
8. CSS document for handhelds
A separate CSS document can be created for PDAs and mobile phones, and only activated when one of these devices is being used to access your site. More and more websites are creating separate CSS documents for printing4, so web pages automatically become print-friendly when users choose to print them. You can also do the same for handheld devices...
9. 3-d push button effect
Back in the early days of the web, 3-d buttons that appeared to become pushed in when moused over were all the rage. At that time, this could only be achieved through images and JavaScript, but now with the advent of CSS we can go all retro and re-create this effect...
10. Same navigation code on every page
Most websites highlight the navigation item of the user's location in the website, to help users orientate themselves. This is a fundamental requirement for basic usability, but can be a pain as you'll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds? Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on each and every page? Of course it is...