• Locked
No replies
Mon, 2013-05-13 19:17
piikoiCoder
piikoiCoder's picture
Offline
newbie
Honolulu
Last seen: 8 years 4 days ago
Honolulu
Timezone: GMT-10
Joined: 2013-05-13
Posts: 1
Points: 2

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;
}

Top
Tags: