CSS layout almost working

[Ethan]

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_site/style_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;}


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
hierarchicalLay outAppStyles2.c ss
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#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.sitePlanContr ols{
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;}

[Stan Brown]

Re: CSS layout almost working

In article <55447041.03082 91036.60fb7954@ posting.google. com> in
comp.infosystem s.www.authoring.html, Ethan <elektrophyte@y ahoo.com>
wrote:[color=blue]
>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[/color]

I am not sure, but I think the system ID in your DOCTYPE has
triggered MSIE's quirks more. You might want to change it to the one
listed at

http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html

taht triggers standards mode.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA

http://OakRoadSystems.com/

HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
validator: http://jigsaw.w3.org/css-validator/