I've been trying to get a layout to work right, but so far haven't
been able to do so. Here's the layout:
http://64.142.13.246/style_testing_s...yle_model3.htm
This is the basic idea:
|---------|
|---------|
| |
|---------|
| | |
| | |
| | |
|---------|
I will include the style definitions at the bottom of this message.
Here's a summary of the results:
Mozilla 1.3 PC: Great
Mozilla 1.3 Mac: Great
IE 6 PC: So-so. Two side-by-side columns are supposed to touch with no
gap or overlap. But there is a gap or an overlap depending on the
width
of the browser window.
IE 6 Mac: Doesn't work at all. Columns totally overlap. Left column
spans entire window.
Any assistance getting this to work would be greatly appreciated.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
styles.css
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
body {
background-color: #ffffff;
margin: 0px;
padding: 0em;}
p {
color: #5f5f5f;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;}
h1, h2, h3 {
color: #004080;
font-weight: 800;
font-family: Verdana, Helvetica, Arial, sans-serif;}
h1 {
font-size: 1.5em;}
h2 {
font-size: 14px;}
h3 {
font-size: 11px;}
a:link {
color: #0080c0;
text-decoration: none;
font-weight: 600;}
a:visited {
color: #0080c0;
text-decoration: none;
font-weight: 600;}
a:hover {
color: #82b9fd;
font-weight: 600;
text-decoration: underline;}
a:active {
color: #ff8000;
font-weight: 600;
text-decoration: underline;}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
hierarchicalLayoutAppStyles2.css
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#topBar1{
margin: 0em;
padding: 0em;
background-color: #8080c0;
height: 15px;
z-index: 3;}
#topBar2{
margin: 0em;
padding-left: 20px;
padding-right: 0em;
background-color: #c0c0c0;
border-top: 2px #0000a0 solid;
border-left: none;
border-right: none;
border-bottom: 2px #004080 solid;
padding-top: 20px;
padding-bottom: 20px;
z-index: 4;}
#leftColumn {
position: absolute;
border: 1px #ff0000 none;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 10px;
margin: 0em;
left: 0%;
top: 75px;
z-index: 2;
right: 65%;}
#rightColumn {
background:#FFF;
border: 1px #0000ff none;
position: absolute;
right: 0%;
padding-top: 20px;
padding-left: 10px;
padding-bottom: 20px;
padding-right: 20px;
top: 75px;
margin: 0em;
z-index: 1;
left: 35%;}
p.blank {
margin: 0em;
padding: 0em;
line-height: 1px;}
p.sitePlanName {
line-height: 16px;
text-decoration: none;
font-size: 12px;
font-weight: 800;
margin: 0em;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 4px;
padding-top: 8px;
border-top: 1px #000080 solid;}
p.sitePlanNotes {
line-height: 16px;
font-size: 11px;
margin: 0em;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-top: 0em;
color: #8080c0;}
p.sitePlanControls{
line-height: 16px;
font-size: 9px;
margin: 0em;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 8px;
padding-top: 4px;}
p.node {
text-decoration: none;
font-size: 11px;
font-weight: 800;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 0px;
padding-top: 0px;
border-top: 1px #000080 solid;
border: 1px #ff0000 none;
padding: 0em;
margin-left: 4px;
margin-top: 0em;
margin-bottom: 0em;
margin-right: 0em;}
p.nodeNotes {
font-size: 11px;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-top: 0em;
color: #8080c0;
border: 1px #ff0000 none;
padding: 0em;
margin-left: 4px;
border: 1px #ff0000 none;
margin-top: 0em;
margin-bottom: 0em;
margin-right: 0em;}
p.nodeControls{
font-size: 9px;
border: 1px #ff0000 none;
padding: 0em;
display: block;
white-space: nowrap;
margin: 2px;
border: 1px #ff0000 none;}
h2.appTitle {
margin: 0em;
padding: 0em;
line-height: 15px;
vertical-align: middle;}