I'm sure I've done something wrong with this, but I can't seem to get the Faux Columns solution working in IE. Below is some pseudo code (site is not on the internet as yet, so I do not have a link to an actual page).
The leftNav.gif is a 168 x 1px graphic to highlight the section in a light blue coloring (HTML code: #D4E5F7), but it doesn't seems to repeat vertically as the style sheet requires.
CSS
HTML:
Thanks in advance!
- George
The leftNav.gif is a 168 x 1px graphic to highlight the section in a light blue coloring (HTML code: #D4E5F7), but it doesn't seems to repeat vertically as the style sheet requires.
CSS
Code:
html>body body {
font-size:16px;
}
body {
background-color:#FFF;
font-family:Arial,Helvetica,sans-serif;
font-size:100%;
text-align:center;
margin:10px 0 0 10px;
}
#container {
margin-left:auto;
margin-right:auto;
text-align:left;
width:760px;
}
#mainContent {
background:url(../../images/other/leftNav.gif) 0 0 repeat-y;
}
#mainContent:after {
clear:both;
display:block;
height:0;
visibility:hidden;
content:'text';
}
#leftNav {
vertical-align:top;
width:22%;
float:left;
background-color:#D4E5F7;
}
#contentMiddle {
width:53%;
float:left;
}
#contentRight {
background-color:#FFF;
width:25%;
float:right;
}HTML:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
</head>
<body>
<div id="container">
<div id="mainContent">
<div id="leftNav">
<ul>
<li>navigation</li>
<li>navigation</li>
<li>navigation</li>
<li>navigation</li>
</ul>
</div>
<div id="contentMiddle">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sed nulla. Quisque neque enim, vestibulum a, commodo non, tincidunt quis, risus. Integer porttitor scelerisque orci. Nam malesuada luctus turpis. Aliquam cursus ipsum id odio. Suspendisse viverra varius massa. Nulla facilisi. Nam sapien mi, laoreet nec, venenatis vitae, lacinia quis, lorem. Vivamus eleifend enim sit amet orci. Cras ornare tortor et neque. Praesent at quam. Etiam et nibh quis nisl adipiscing luctus. Ut sit amet orci. Suspendisse mauris massa, fringilla in, adipiscing eget, dapibus iaculis, felis. Praesent mi tortor, aliquam ut, ultrices quis, rhoncus sed, urna. Mauris pretium, turpis in sagittis viverra, nisl augue mollis diam, ac tincidunt felis justo eget felis. Fusce ultricies pede ac ligula. Nulla nibh dui, varius in, lobortis at, ultricies a, erat. </p>
</div>
<div id="contentRight">
content content content. . .
</div>
</div>
</div>
</body>
</html>Thanks in advance!
- George
