Hi,
I'm certain the solution will humiliate me, but I am desperate for a solution at any price.
The following URL links to a page whose intent is to lay out:
Picture - Text – Picture
on a single rationally spaced line.
http://america-3.org/jsp-pages/lvl-2/pages/ff-test-scorpion.jsp
The top half does that using successfully using:
-- a block container for the line ... id='toplvl2-header',
-- a left justified flag image that props it open to the desired height
-- an absolute positioned container for the text ... id='toplvl2-header-center'... with its top, bottom, left and right set to 0. Which with FF pins its borders to fill its container ... id='toplvl2-header', but with IE9 only pins its top, which I compensated for by giving its container ... id='toplvl2-header' ... the same color as the text container so you don't notice].
-- and floating the owl right. NOTE: I had to put the owl first in the code, i.e. before the flag and text container. Otherwise IE9 screwed it up!
The bottom half was supposed to be a start on trying to do the same thing with display: table, table-row, and table-cell.
I began by trying to just put 3 'Xs' in a row with the most simplistic implementation of a css talbe I can imagine. And was miserably defeated by IE9.
On FoxFire I get 3 'Xs' in a row.
On IE9 I get them stacked one on top of the other.
Actually what IE9 does is treat each cell like it is a block instead of of laying it out like an inline element. Note how IE9 honors the width:20% and FF ignores it.
I'm prepared to suffer any amount of abuse if anyone can tell the mistake I made that can't see.
Code follows. The style sheet holds the style for the top half. But for the 3 X line I put stye directly into the HTML so I could be sure what was being interpreted.
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="/css/html.css" rel="stylesheet" type="text/css"> <link href="/css/blocks.css" rel="stylesheet" type="text/css"> <link href="/css/fonts.css" rel="stylesheet" type="text/css"> </head> <body id='bkgrnd'> <div id='toplvl2'> <div id='toplvl-bluestripe'></div> <div id='toplvl2-header'> <img id='owllvl2' src='/images/owl2.jpg'> <div id='toplvl2-header-center' class='title-blue-16'> Welcome to the Cyber Home of<br> The American Political Party<br> (TAPP) </div> <img id='flaglvl2' src='/images/flag4.jpg'> </div> <div id='toplvl-bluestripe'></div> <div id='toplvl2-header'> <div style='display:table;background-color:red;'> <div style='display:table-row;background-color:blue;'> <div style='display:table-cell;background-color:yellow;width:20%'> X </div> <div style='display:table-cell;background-color:yellow;width:20%'> X </div> <div style='display:table-cell;background-color:yellow;width:20%'> X </div> </div> </div> </div> </div> </body> </html> STYLE SHEET body#bkgrnd { margin: 0; padding: 0; background-image: url(/images/dot2.gif); background-repeat: repeat; height: 100%; width: 100%; text-align: center; z-index:0; } img#flaglvl1, img#flaglvl2 { vertical-align:bottom; z-index:50; border-style:solid; border-color:#000066; border-width:3; } img#owllvl1, img#owllvl2 { position:absolute; right:0; vertical-align:bottom; z-index:50; border-style:solid; border-color:#000066; border-width:3; } div#toplvl1, div#toplvl2 { background-color: #FFFFFF; margin-left: auto; margin-right: auto; border-width: 3; border-style: solid; border-color: red; height:100%; z-index:1 } div#toplvl1 {width: 850px;} div#toplvl2 {width: 640px;} div#toplvl-bluestripe { margin-top: 10px; margin-bottom: 10px; background-color: #000066; height: 10px; z-index:2; } div#toplvl1-header, div#toplvl2-header { background-color: #FFFFFF; margin-top:auto; margin-bottom:auto; position: relative; text-align: left; z-index:0; } div#toplvl1-header-center, div#toplvl2-header-center { background-color: #FFFFFF; padding:0; margin:0; display: inline; position:absolute; right:0; left:0; bottom:0; top:0; z-index:-50; width:100%; text-align: center; }