Sunday, 20. July 2008, 09:18:44
firefox, svg, css, safari
...
There is border-radius CSS3 property that makes the angles of the block rounded. Mozilla based browsers support it with vendor prefix -moz- for ages: -moz-border-radius:2em. Safari also supports it but with -webkit- prefix. Opera doesn't support this property, but unlike Safari and FF it supports SVG images as backgrounds (since 9.5), so we can rewrite the block styles in SVG and place the image as block background. But sometimes not all of the corners of the block should be rounded...
Read more...
Wednesday, 16. July 2008, 02:37:58
msie6, css
Code:
<hr id='fline'>
CSS:
#fline{
height:20px;/*bg picture height*/
background:transparent url(images/line_11.jpg) top repeat-x;
border:none
}
It makes 1 pixel gray border in MSIE6.
To make one-color line without an image in IE one has to apply color:#color, but something like color:transparent don't work.
After my shaman dances I came to this hack:
*html #footer{
position:relative;/*to position clipped element*/
}
*html #fline{
height:22px;
clip:rect(1px auto 20px 1px);
position:absolute;
bottom:0;
width:100%;
left:0;
margin:0 -1px;/*to clip right borders*/
}
It works, but if I try to add something like padding-bottom:20px to *html #fline this hack doesn't work...
Btw, clip:rect is the most incorrect property in css2, because its length values are not like padding/margin/border ones (as it were the most logically): right and bottom values are calculated from left and top, not from the side they indicate.
WIDGETIZE