Placement Properties |
|||
Comments: Only IE 4.0 will support border styles with tables. If a border is put around a table such as: table {border: thick double red} The result will have a double thick red border around the table, plus another one on top of that. The table cell only copies the width and style properties of the table property, but not the color. The same thing happens when we specify a property for indivdual rows. However, by using individual properties for any table data is a good work around. Try this: td.a {border: thin double red} This creates a nice double red border around any particular cell with class=a. Remember, though, this work around only works in IE4.0. | |||
border-width | Sets the width of the element's border. **NOTE: for some reason, the straight border-width tag does not produce a border in IE4.0. Other combinations of tags do, though. |
thin medium thick none |
div {border-width: thin} Displays a thin border around the division. |
border-style | Sets the style of the element's border. | none solid double groove ridge inset outset |
table {border-style: dashed} Displays a dashed border around the table. |
border-color
|
Sets the color of the element's border. | color name hex value rgb(R%, G%, B%) rgb(R, G, B) |
table {border-color: red} Displays a red border around the table. |
border border-top border-bottom border-left border-right
|
Sets the width, color, and style of the border simultaneously | width value style value color value |
table {border: thick double red} Displays a thick, double, red border around the table. table {border-top: thin dashed red} Diplays a thin, dashed, red border at the top of the table. |
height | Sets the height of the element. | XX units | .short {height: 70px} Sets the item in the "short" class to be 70 pixels high. |
width | Sets the width of the element. | XX units | p.skinny {width: 100px} Sets all skinny class paragraphs to be 100 pixels wide. |
float
|
Places the element to the left or right and flows text around it. | right left none |
img.button {float: left} Places a button class image to the left margin and flows text around it. |
clear
|
Prevents text from flowing around an element. | right left none |
img.button {clear: left} Places a button class image to the left margin and prevents any text or other elements from flowing beside it. |