Defindit Docs and Howto Home

CSS allows blocks to have borders, and some of the border styles allow blocks to look like buttons. There is no native CSS method to have rounded corners. Rounded corners are coming in CSS v3, however, many features of CSS v2 are not implemented or are implemented wrong. I am not holding out much hope for CSS v3.

These buttons should render properly in Firefox and Internet Explorer (IE). I've tested them with Firefox 1.5 Linux, and IE 7 Win XP. The buttons have a light green background, black text (the text is a link, that is: an <a> tag), and somewhat darker borders with shading. See buttons.css for more comments.

Try enlarging and reducing the font size in your browser. In Firefox use ctrl minus to reduce and ctrl plus to enlarge. Ctrl plus is really ctrl = but you get the idea. In Firefox this works fine. In IE to enlarge the text use the menus View -> Text Size -> Larger. (In IE the ctrl minus and ctrl + keystrokes enlarge all content, not just the text. IE has rendering bugs with enlarged pages. It pretty much works, but you will probably have to refresh to improve text alignment and rendering.)

Notice that as the text gets larger, the buttons expand and even linewrap. However, buttons do not break in half. The line wrapping is only for whole buttons. You'll also notice that I've limited width to 800 pixels. It would be nifty to use % or em, but IE has a bug where it ignores container blocks and uses the viewport instead. This destroys page layouts forcing the use of hardcoded pixel widths. If you are thinking that this bug ruins the utility of much of CSS, you are correct.

IE also stops justifying normal paragraph text when the entire page is enlarged.

The css is buttons.css. There are more comments in the css file. There are an enormous number of bugs and unimplemented CSS v2 features in the box model and visual formatting model. There are different sets of bugs in each browser.

Below are buttons that are <a> tags with a class=button attribute. This seems to work fine in both IE and Firefox.

SSH public key authentication, scp and ssh notes  Emacs key commands for beginners  Ethernet setup and problem solving with Linux and Fedora  Deft: Table oriented programming and relational data model  Home 

Below are buttons which are <div> tags with the <a> tags inside the <div>. This works fine, but the entire button is not clickable, only the text (just as with a normal <a> tag link).

SSH public key authentication, scp and ssh notes
 
Emacs key commands for beginners
 
Ethernet setup and problem solving with Linux and Fedora
 
Deft: Table oriented programming and relational data model
 
Home