I did not find a solution to my problem upon searching... I have looked and troublshooted this till I am blue in the face. I am trying to surround 3 columns with a 2px border. But parts of the border is/are disappering when viewed in IE. Also when viewed in FF the left column will be show below the center column. Any help would be appreciated...
link to live site
http://www.usmc-clan.com/epic/contac...tactus_new.htm
link to where I got css for a max-width based layout for IE
http://www.pmob.co.uk/temp/min-max-3col.htm
css
Code:
* {margin:0;padding:0}
body {
padding:0 0 10px 0;
color: #000000;
background:#fff;
text-align:center;
margin: 0 0 0 28px;
}
#wrapper{
background:#D6D6D6;
width:auto;
padding-top:0px;
min-width:718px;
max-width:718px;
text-align:left;
/* margin-left:0 0 0 28px;*/
margin-right:auto;
position:relative;
}
#outer{
margin-left:142px;
margin-right:142px;
background:#ffffff;
/* border:1px solid #808080;*/
color: #000000;
}
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
margin:0px;
padding:0px;
display:block;
border-bottom:2px solid #808080;
overflow:hidden;
color: #fff;
background:#ffffff;
font-size:0;
}
#left {
position:relative;/*ie needs this to show float */
width:142px;
float:left;
margin-left:-141px;/*must be 1px less than width otherwise won't push footer down */
left:-1px;
border-left: 2px solid #808080;
border-right: 2px soild #808080;
background:#D6D6D6 ;
}
* html #left {margin-right:-3px;}/* 3px jog*/
* html #outer{/* 3px jog*/
margin-left:142px;
margin-right:142px;
}
p {margin-bottom:1em;padding:0 5px}
#right {
position:relative;/*ie needs this to show float */
width:142px;
float:right;
margin-right:-141px;/*must be 1px less than width otherwise won't push footer down */
left:1px;
border-right: 2px solid #808080;
background:#D6D6D6;
}
* html #right {margin-right:-142px;margin-left:-3px}/* stop float drop in ie + 3px jog */
#footer {
width:100%;
clear:both;
height:30px;
line-height:30px;
border-top:2px solid #808080;
background-color:#ffffff;
color: #000000;
text-align:center;
position:relative;
}
#clearheader{height:100px;}/*needed to make room for header*/
#centrecontent {
float:right;
width:100%;
position:relative;
border-left:2px solid #808080;
border-right: 2px solid #808080
}
html>body #centrecontent {margin: 0 -0.5%}/*moz needs this*/
.outerwrap {
float: left;
width: 99%;
}
.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
/* mac hide\*/
* html #outer, * html #wrapper,* html #centrecontent {height:1%}
/* end hide */
HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 col layout with equalising columns and footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- link to CSS -->
<link rel="stylesheet" type="text/css" href="../pages.css"/>
<style type="text/css">@import "../pages.css"</style>
<!-- allows use of max-width with internet explorer web browser -->
<!--[if gte IE 5]>
<style type="text/css">
body {width:expression( documentElement.clientWidth < 718 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 718 ? "718" : "auto") : "718px") : "auto" );}
#wrapper {width:expression( documentElement.clientWidth > 718 ? (documentElement.clientWidth == 0 ? (body.clientWidth >718 ? "718" : "auto") : "718px") : "auto" );}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="outer">
<div id="clearheader"></div>
<div class="outerwrap">
<!-- center column content -->
<div id="centrecontent">
<h1>Min width of 718px and max width of 718px</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<br />
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla. </p>
<br />
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.
</p>
</div>
<!-- left column content -->
<div id="left">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.
</p>
</div>
<div class="clearer"></div>
<!-- end of outter wrap -->
</div>
<!-- right column content -->
<div id="right">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div class="clearer"></div>
</div>
<!-- footer content -->
<div id="footer">
<!--webbot bot="Include" U-Include="../include/footer.htm" TAG="BODY" --></div>
<!-- header content -->
<div id="header">
<!--webbot bot="Include" U-Include="../include/header.htm" TAG="BODY" --></div>
</div>
</body>
</html>
06-20-2006, 02:11 PM
Linear Mode
