CSS Tips
CSS stuff I tend to forget.
Posted on 2005-05-11 11:26 by Jørn Støylen [permalink]
Here's a collection of CSS tips that I need to jot down somewhere, so I don't have to spend half an hour searching for it online every time. (I forget pretty easily.)
CSS positioning
If you want to position something absolutely within a containing block (say, a div), that containing block needs to be positioned too. From this page:
The containing block for an absolutely positioned element is established by its closest, positioned ancestor. In other words, the nearest element outside it that has a position of absolute, relative or fixed. If there is no such ancestor element, the initial containing block (the browser window) is used.
HTML:
<div id="container">
<div id="item">
<img src="...">
</div>
</div>
CSS:
#container {
width: 100px;
height: 100px;
position: relative;
}
#item {
width: 20px;
height: 20px;
position: absolute;
top: 0px;
right: 0px;
}
Elastic layouts / Sizing text using ems
Clagnut's blog has an article about sizing text using ems.
Pixelmeadow kind of expands on this with an article about elastic layouts.
border-collapse
table {
border-collapse: separate;
/* ... or ... */
border-collapse: collapse;
}
The border-collapse property determines whether the border around a table cell is separate for every cell or if cells share borders. For example, if two adjacent table cells have 1px wide borders, �separate� mode will cause the border between them to be 1px+1px=2px wide, while �collapse� mode will make the two borders collapse into just one 1px wide border.
An important thing to note is that this property goes with the CSS for the whole table, not cells or rows.
Inline images and spacing
I keep forgetting this, so I might as well jot it down: If you want to display a bunch of images inline in a row with no space between them, do not use whitespace between the tags.
Wrong:
<img src="...">
<img src="...">
<img src="...">
Right:
<img src="..."><img src="..."><img src="...">
Alternatively, for prettier code:
<img
src="..."><img
src="..."><img
src="...">
Comments
Comments closed
Commenting is closed for this article.
or about the images – just write this:
Images
img {float:left;}