coldfusion - Using display inline-block CSS in cfdocument -
the html/css below works in recent browsers, not in cf9's cfdocument. ideas? use inline-block property in cfdocument, if can. or perhaps there alternative render similar results?
what know?
aware cf's cfdocument supports limited set of css properties (css1/css2). cf documentation says supports "display" css property. however, doesn't identify values supported. have included expected output , example code.
expected output (see image below)
img http://i44.tinypic.com/35apx53.jpg
example code
<cfdocument format="pdf" pagetype="letter"> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>css demo: display property (block, inline, inline-block)</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body style="margin: 0; padding: 0"> <style> .container { margin-left: 2em; width: 35em; border: none; } div { margin: 1em 0; border: solid 1px red; } p { margin: 1em 0; border: dotted 2px blue; } div#one p { display: block; width: 6em; text-align: center; } div#two p { display: inline; width: 6em; text-align: center; } div#three p { display: inline-block; width: 6em; text-align: center; } </style> <div class="container"> <div id="one"> <strong>test 1: block</strong> text within block-level level element (div). <p>here's block-level paragraph (p).</p> here's additional text still inside block-level elment. </div> <div id="two"> <strong>test 2: inline</strong> text within block-level level element (div). <p>here's inline paragraph (p).</p> here's additional text still inside block-level element. </div> <div id="three"> <strong>test 3: inline-block</strong> text within block-level level element (div). <p>here's inline-block paragraph (p).</p> here's additional text still inside block-level element. </div> </div> </body> </html> </cfdocument>
you may try float instead display : follow link
.container { margin-left: 2em; width: 35em; border: none; } div { margin: 1em 0; border: solid 1px red; } p { margin: 1em 0; border: dotted 2px blue; } div#one p { float: right; width: 6em; text-align: center; } div#two p { float: right; width: 6em; text-align: center; } div#three p { float:right; width: 6em; text-align: center; } .clear {clear:both; border:0px}
Comments
Post a Comment