CSS z-index Gotcha with Parent/Child Elements

In CSS, z-index is used to control which elements appear in front of or behind each other when they're overlapping on the screen.

However, there is one "gotcha" to note, that is if both a child and parent element has z-index defined, and you want the child to appear in front of something and the parent to appear behind, it won't work. Instead, both parent and child elements will appear behind, with the parent's z-index taking effect. This can happen for example if you have an overlay, and you want a modal window (the child) to appear on top of the overlay, while the parent element on the main page should be behind the overlay. If the parent has a z-index, then both parent and child will be behind the overlay, regardless of the z-index of the child.

Getting Width of Component in HTML

xxxx.style.width  (where xxxx is the variable representing the div) only returns the width as defined by CSS. It does not return the actual width after rendering has taken place. There are a number of Javascript options for this, one of which is the xxxx.offsetWidth property. Other options exist as well, each with its own subtle nuance as to what is included or not.

References:

• http://www.ozzu.com/programming-forum/javascript-getting-div-current-width-t39999.html
• https://developer.mozilla.org/en/DOM/element.offsetWidth
• http://help.dottoro.com/ljfwvsrv.php

Bootstrap: Nice Boilerplate CSS

Bootstrap provides nice boilerplate CSS for a decent looking site. Great resource if you're not too fussed about how "unique" your site looks.

Link: http://twitter.github.com/bootstrap/

Gotcha with CSS Height

If you put CSS height: 100% in a div, it may not work if the parent container doesn't have a height defined. To fix it, the parent container needs to have a height defined as well.

CSS Borders

What used to require complex tables and multiple graphics can now be done via CSS. It is possible to have borders, rounded corners and even drop-shadows. Only catch is that it doesn't work on IE.

Example:

.box-border  {
    background-color: #0000FF;
    border-width: 2px;
    border-color: #FF0000;
    border-style: solid;
    border-radius: 15px;
    -moz-border-radius: 15px;
}

References:

• http://www.w3schools.com/css3/css3_borders.asp
• http://www.quackit.com/html/codes/html_borders.cfm

CSS Element Positioning

Key points:

• For "static" and "relative", elements are positioned according to natural document flow. "relative" offers some positional control, but both take up space on the page. "relative" is often used as containing blocks for elements positioned with e.g. "absolute".
• "absolute" positioning is relative to containing block e.g. a parent element with "position: relative". If no parent containing block is present it'll be relative to the document.
• "fixed" positioning is relative to the current browser viewport.
• "fixed" and "absolute" both take up no space in the natural document flow. It's like a separate layer.

References:

• http://msdn.microsoft.com/en-us/library/ms533005(v=vs.85).aspx
• http://www.quirksmode.org/css/position.html
• http://www.w3schools.com/cssref/pr_class_position.asp

Formatting Issues With File Input Element

The HTML file input element is extremely difficult to format. It consists of a text input field for the filename, a "Browse" button, and a text label displaying the file that was chosen after a file has been chosen. It is not possible to make it just a button with the other elements. To make things worse, it is not possible to bring up the file browsing interface to pick a file via any other HTML element.

The only way to have an upload button that looks and functions purely as a button is as follows:

• Hide the file input button by setting opacity to 0.
• Put the button in a div with "overflow: hidden",
• Set the button to a large size and absolute position to top-right (this also means that the parent div has to be a positioned element).
• Have a regular image/button or a background image in the same place to serve as the image for the button.

What this does is:

• Only the button of the file input element is clickable. The rest of it has overflowed to the left into the hidden area of the parent div. (This fixes a mouse styling issue).
• The button is not visible due to opacity. User only sees the image drawn on top of it.

However, it is not possible to style the mouse cursor to the "hand" pointer.

References:

• http://www.quirksmode.org/dom/inputfile.html
• http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Changing the Cursor Pointer

When using Javascript to make links (e.g. onclick) out of buttons or any other HTML element, the mouse point will not change to the "hand" when moused over. This can be done via CSS "cursor" property e.g. "cursor: pointer;".  However, IE uses "cursor: hand", so to ensure compatibility, will have to use both.

References:

• http://www.echoecho.com/csscursors.htm
• http://www.w3schools.com/jsref/prop_style_cursor.asp