Adjusting the left property will have no effect on the matching elements unless those elements have their CSS position set to relative or absolute. The default CSS position for all block‑level elements is static.
If you put an absolutely positioned box inside a relatively positioned box, it moves with that box. It is absolutely relative!
Solution to Disappearing Background in IE
If you have a definition list in a relatively positioned div tag, the background image may disappear in Internet Explorer.
The solution is simple. Add a width declaration for the element in your style sheet, i.e. width : 100%;
If this does not help, you can try this tip from Matt Smith at http://www.positioniseverything.net/explorer/ie-listbug.html:
Add the following declaration in your style sheet:
ul, ol, dl {
position: relative;
}
If lines of text inside the pre tag are too long it may mess up the page layout in IE.
Use the following style from Tero Karvinen:
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
Remove Vertical Scrollbar From Textarea
To remove a vertical scrollbar from a textarea, use the following style :
overflow:hidden
Difference Between Visibility and Display
Page elements can be hidden from view by setting either visibility:hidden or display:none.
If visibility:hidden is used, the item will still occupy space on the page, whereas in case of display:none, it won’t.
3 character color notation in CSS
In CSS you can also use three-character values: "06f" is equal to "0066ff".
http://www.colortools.net/article_web_colors.html
Have Firefox use width for span
Use the following style in order to be able to use the width attribute in Firefox:
<style type="text/css">
span {display:-moz-inline-box; /* Gecko proprietary */
display:inline-block; /* supported by Opera and ? */
width:25%;height:1em; /* width and height required */
vertical-align:top; /* Gecko needs this */
} /* IE, Opera & Gecko slight diff */
</style>
The first important rule is that vertical margins collapse. That means that when a browser calculates the vertical distance between two adjacent elements, the largest margin will be applied, and the other one will be ignored. On the other hand, horizontal margins are added together to work out the total horizontal distance between two elements.
If you want to create a table with a spreadsheet-like look, you can use the following style:
table, tr, td {
border-style:solid;
border-width:1px;
border-color:#C6C3C6;
border-collapse:collapse;
}
The important property here is border-collapse which makes table cells share adjacent borders. If you omit it, the default separate value will be used for this property, and the table cells will have their own borders.
Alternatively, one can use the following style with the same effect:
table {
border-collapse: separate;
}
td {
border: 1px solid #ccc;
}
A very nice example on how to build a percentage bar with two images and css!
