Page is a not externally linkable
appi2 - 9:22 am on Jun 30, 2008 (gmt 0)
#ex2 span {vertical-align:middle;} #ex3 span {vertical-align:baseline} </style> <body>
hmm so vertical-align is the bit of magic that makes this useful.
Ok so what am I doing wrong here (FF2 fails, even IE6 does it right!)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Inline block</title>
<style type="text/css">
span {
display: -moz-inline-box; /* For FF<3 */
-moz-box-orient: vertical; /* For FF<3 */
display:inline-block;
width:4em;
/*Try Setting height FF2 still only shows first line*/
/*height:5em;*/
margin-left:0.5em;
background:tan;
}
#ex1 span {vertical-align:top }
<!--[if lt IE 8]>
<style type="text/css" media="screen">
span {display: inline;}
</style>
<![endif]-->
</head>
<p id="ex1">It's makes lots more sense<span>You can do stuff like this.</span> now with vertical alignment</p>
<p id="ex2">It's makes lots more sense<span>You can do stuff like this.</span> now with vertical alignment</p>
<p id="ex3">It's makes lots more sense<span>You can do stuff like this.</span> now with vertical alignment</p>
</body>
</html>