aip solutions developer’s blog

One post inspired me to experiment with font-size and line-height. Here is the result of a few hours tests in IE6 and FF.

My result

Here is the CSS:

* 	{font-family:Arial,sans-serif;}

html,body{text-align:center;}

div	{position:relative;
         width:300px;
         margin:130px auto 0;padding:15px 0;
         background:black;
        }

div p	{position:relative;
         min-height:22px;height:auto!important;height:22px;
         margin:0 -14px;padding:22px;
         border:solid 15px black;border-width:0 15px;
         background:white;
        }

em.absTL,
em.absTR,
em.absBL,
em.absBR {position:absolute;
          width:30px;height:30px;line-height:32px;
          padding:0;
          font-size:120px;
          text-indent:-6px;
          color:black;
          overflow:hidden;
         }
 em.absTL{top:0;left:-14px;}
 em.absTR{top:0;right:-14px;}
 em.absBL{bottom:0;left:-14px;}
 em.absBR{bottom:0;right:-14px;}

And the HTML:

<div>
	<em class="absTL">&bull;</em>
	<em class="absTR">&bull;</em>
	<em class="absBL">&bull;</em>
	<em class="absBR">&bull;</em>
 	<p>
 		Some dynamic content here <br />
 		Some dynamic content here<br />
 	</p>
</div>

Preview:

Specific notes

1. div {vertical-align:top;} - IE6 don’t like it. The Internet Explorer 6 loses the em’s content;
2. bold em-s - IE6 again don’t like it. The line-height is quite different from FF;
3. other browsers - it works fine at least on IE6/7/8, FF3, Chrome, Opera, Safari.

The post

Thanks to Stu Nicholls and his post Curved Corners