Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@charset "iso-8859-1";
.clear {
clear: both;
padding-bottom: 1px;
margin-bottom: -1px;
}
.hide {
display: none !important;
}
.inside {
padding: 0 1em;
}
ul, ol, dl, p, h1, h2, h3, h4, h5, h6 {
margin-top: 14px;
margin-bottom: 14px;
padding-top: 0;
padding-bottom: 0;
}
h1 {
font-size: 220%;
}
h2 {
font-size: 190%;
}
h3 {
color: navy;
font-size: 160%;
}
h4 {
color: navy;
font-size: 130%;
}
h5 {
color: navy;
font-size: 100%;
}
h6 {
font-size: 80%;
}
a, a:link, a:visited, a:active {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
code {
font-family: "Courier New", Courier, monospace;
}
label {
cursor: pointer;
}
td, th {
vertical-align: top;
}
table {
font-size: 100%;
}
body {
margin: 0;
font-size: 100.1%;
border-width: 0;
}
#pageWrapper {
min-width: 40em;
width: auto;
border: solid 1px #fff;
}
* html #pageWrapper {
word-wrap: break-word;
}
#masthead {
border-width: 0 0;
padding: 0;
border-color: #fff;
border-style: solid;
}
#masthead h1 {
padding: 0;
margin: 0;
}
#outerColumnContainer {
border-left: 14em solid #fffccc;
border-right: 14em solid #fffccc;
background:green
}
#innerColumnContainer {
border-width: 0 1px;
margin: 0 -1px;
width: 100%;
z-index: 1;
border-color: #fff;
border-style: solid;
}
#leftColumn, #middleColumn, #rightColumn, * html #SOWrap {
overflow: visible;
position: relative;
}
#SOWrap {
float: left;
margin: 0 -1px 0 0;
width: 100%;
z-index: 3;
}
#middleColumn {
float: right;
margin: 0 0 0 -1px;
width: 100%;
z-index: 5;
}
#leftColumn {
float: left;
margin: 0 0 0 -14em;
width: 14em;
z-index: 4;
}
#rightColumn {
float: right;
width: 14em;
margin: 0 -14em 0 0;
z-index: 2;
}
#footer {
border-width: 1px 0 0;
padding: 0.5em 0.5em 0;
border-color: #fff;
border-style: solid;
}
p.fontsize-set {
font-size-adjust: 80%;
text-align: center;
}
p.fontsize-set img {
border-width: 0;
}
#menuh {
font-family: arial, helvetica, sans-serif;
width: auto;
float: left;
}
#menuh a {
text-align: center;
width: auto;
display:block;
white-space:nowrap;
margin:0;
padding: 0.3em 0.3em 0.3em 0.1em;
border-color: rgb(92,150,181);
border-style: solid;
border-width: 0 1px 0 0;
}
#menuh a:link, #menuh a:visited, #menuh a:active /* menu at rest */ {
color: navy;
background-color: aqua;
text-decoration:none;
width: auto;
}
#menuh a:hover /* menu at mouse-over */ {
color: white;
background-color: rgb(98,129,176);
text-decoration:none;
}
#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */ {
background-image: url(../images/navdown_black.gif);
background-position: right center;
background-repeat: no-repeat;
width: auto;
}
#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */ {
background-image: url(../images/nav_black.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh ul {
list-style:none;
margin:0;
padding:0;
float:left;
width:9em;
border-right-width: 1px;
border-left-width: 1px;
outline-width: thin; /* width of all menu boxes */
}
#menuh li {
position:relative;
min-height: 1px;
vertical-align: bottom;
}
#menuh ul ul {
position: absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}
#menuh ul ul ul {
top:0;
left: 100%;
}
div#menuh li:hover {
cursor:pointer;
z-index:100;
}
div#menuh li:hover ul ul, div#menuh li li:hover ul ul, div#menuh li li li:hover ul ul, div#menuh li li li li:hover ul ul {
display:none;
}
div#menuh li:hover ul, div#menuh li li:hover ul, div#menuh li li li:hover ul, div#menuh li li li li:hover ul {
display:block;
}
.s1 {
float: left;
margin-right: 12px;
margin-bottom: 8px;
margin-top: 8px;
}
.s2 {
}
.s3 {
float: right;
margin-left: 12px;
margin-bottom: 8px;
margin-top: 8px;
}
.vnav {
margin: 0;
}
.vnav ul, .vnav ul li {
background-color: aqua;
margin: 0;
padding: 0;
list-style-type: none;
display: block;
}
.vnav ul {
background-color: aqua;
border: solid 0 #fff;
}
.vnav ul li {
background-color: aqua;
border-bottom: 0 solid #fff;
}
.vnav ul li, .vnav ul li a {
margin: 0;
display: block;
padding: 0;
line-height: normal;
}
.vnav ul li a {
background-color: aqua;
display: block;
padding: 2px 5px 3px;
}
.vnav ul li a, .vnav ul li a:link, .vnav ul li a:visited, .vnav ul li a:active, .vnav ul li a:hover {
text-decoration: none;
border: solid 1px white;
cursor: pointer;
}
.vnav h3 {
margin-bottom: 0;
padding-bottom: 0;
font-size: 126%;
}
* html .vnav ul li a {
background-color: aqua;
height: 0.01%;
}
* html .vnav ul {
background-color: aqua;
position: relative; /* IE needs this to fix a rendering problem */
}
#pageWrapper, #masthead, #innerColumnContainer, #footer, .vnav ul, .vnav ul li, .hnav, .hnav ul li a {
border-color: rgb(92,150,181);
}
html, body {
background-color: white;
color: black;
font-family: arial, helvetica, sans-serif;
}
#pageWrapper {
font-size: 80%;
}
#masthead {
background-color: white;
color: #fff;
}
/*#outerColumnContainer {
border-left-color: white;
border-right-color: white;
background-color: #fff;
}*/
.vnav ul li a:link, .vnav ul li a:visited, .vnav ul li a:active {
text-decoration: none;
background-color: rgb(218,235,249);
color: navy;
}
#rightColumn .vnav ul li a:link, #rightColumn .vnav ul li a:visited, #rightColumn .vnav ul li a:active {
font-size: small;
background-color: aqua;
text-align: center;
}
.vnav ul li a:hover, #rightColumn .vnav ul li a:hover {
text-decoration: none;
background-color: rgb(98,129,176);
color: #fff;
}
#rightColumn .inside {
font-size: 100%;
}
#rightColumn .inside .vnav {
font-size: 110%;
}
#footer {
background-color: white;
color: rgb(92,150,181);
text-align: center;
}
#innerColumnContainer:after {
content:" ";
display:block;
clear:both;
height:0;
overflow:hidden;
}
#innerColumnContainer {
zoom:1.0
}
</style>
</head>
<body>
<div id="pageWrapper">
<div id="outerColumnContainer">
<div id="innerColumnContainer" class="clearfx">
<div id="SOWrap">
<div id="leftColumn">
<p>left column</p>
<p>left column</p>
<p>left column</p>
<p>left column</p>
<p>left column</p>
<p>left column</p>
</div>
<div id="rightColumn">
<p>right column</p>
<p>right column</p>
<p>right column</p>
<p>right column</p>
<p>right column</p>
<p>right column</p>
</div>
<div id="middleColumn">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The above wouldn't work for me in any browsers until I removed the 1px margin from both these rules as follows.
Reply With Quote
Originally Posted by abetmindennew
Bookmarks