If you have a copy of CSSEdit (if you work for IT as a web developer you should) you can use it to see exactly which styles are being applied to an element, and exactly which elements are parents of an element. You can also override style sheets temporarily without affecting the online appearance of a page.
Extra space on the bottom of images in divs
Images (the IMG tag) are by default inline elements. This means it needs space for descenders and other quirks of inline text. If your image is the only item in a div and you don’t want it to have space between the bottom of the image and the bottom of the div, set the IMG tag to display: block. Once it’s no longer an inline, the space will go away.
Elements overlap and z-index doesn’t help
The z-index rule only applies to positioned elements. If you need normally-positioned elements to show up in front of or behind other elements, give the element whose z-index you want to change a position of relative.
Positioned elements don’t position correctly
- Remember that absolute-positioned elements position themselves according to the nearest parent element that is also positioned to anything other than static. You can use position: relative on a parent element to anchor a child element’s positioning to that parent.
- Remember that absolute-positioned elements do not contribute to the height and width of the parent element(s). You’ll usually find it most reliable to designate one large, important child element as the one that all other elements are relative to. This “anchor” element should not be positioned except perhaps as position: relative.
- Remember that you can position from the right, left, top, and bottom. Don’t think like Khan! Consider which end of the child element should be anchored to produce the most reliable results. If one of them can be set to zero, that is always exact and should be used.
- Remember that EM units are relative to the current element’s settings; an EM for an H2 is likely to be different than an EM for a P. If you’re trying to set padding or margins to a common amount, but can’t put the padding on the parent element, consider using percentages. Percentages are relative to the parent element.
And remember that sometimes floating is better than positioning. While floats also do not contribute to the size of the parent element, unrelated elements can be told to act according to the location of floats in two ways. Elements can wrap around floats, and elements can also be told to “clear” floats on either the right, left, or both, thus automatically appearing beneath the floated element.
Zeros are wonderful things
Whenever you can use a zero in one direction instead of a number in another, that’s much more reliable. If you want the text box aligned to the right of its container, don’t set the left to some arbitrary number; set the right to zero.