123dhs321
04-05-2005, 07:37 PM
For the life of me I cant get my image to repeat with the left column or the container itself. Please help! works in IE but not FF.
http://cupertino.j-tech.net/hrsgusers/www/
Here is my css:
/*-- body --*/
* {margin:0; padding:0;}
body {
margin-bottom: 10px;
font: small Avenir, "Lucida Grande", "Bitstream Vera Sans", lucida, arial, verdana, helvetica, sans-serif;
font-size: small !important; /* ua > v6 */
font-size /**/: x-small; /* ua < ie6 */
text-align: center;
color: #333;
background-color:#1D4898;
quotes: "\201C" "\201D" "\2018" "\2019";
}
/*-- typography --*/
p {
margin:0 0 .75em;
line-height:1.3em;
word-spacing: 0.1em
}
h1 {
font-size: 2.1em;
font-weight: normal;
letter-spacing: -0.02em;
}
h2 {
font-size: 1.8em;
font-weight: normal;
letter-spacing: -0.005em;
}
h3 {
font-size: 1.1em;
font-weight: bold;
font-style:oblique;
letter-spacing: -0.005em;
line-height: 1.2em;
}
h5 {
font-size: 1em;
font-weight: normal;
font-style: italic;
}
h6 {
font-size: 1em;
font-weight: normal;
}
sup {
font-size:70%;
font-style:oblique;
padding-top: 5px;
color:#999;
}
img {border: none;}
a img {border-width:0;}
.clearboth { clear:both;}
a:link, a:visited {
color: #00c;
text-decoration: underline;
}
a:focus, a:hover, a:active {
color: #00c;
text-decoration: none;
}
/*-- form style --*/
/* form */
form {
margin: .8em 0;
}
input, textarea, select {
background: #ECE9D8;
border: 3px double #ccc;
color: #666666;
margin: 2px 0 0 0;
}
input:hover, textarea:hover, select:hover {
background-color:#ffc;
border: 3px double #ccc;
color: #666666;
margin: 2px 0 0 0;
}
fieldset {
border-top: 10px solid #666;
border-bottom: none;
border-right: none;
border-left: none;
padding: 10px;
margin-bottom:5px;
}
legend {
background: transparent;
color: #950000;
font-size: 1.5em;
font-weight:bold;
margin: 5px 4px;
}
.required, .error {
background: transparent;
color: #990000;
font-weight: bold;
font-size:1.1em;
}
/***STRUCTURE --------------------------------- */
/*-- contain --*/
#container {
margin: 0 auto;
padding: 0;
width: 755px;
text-align: left;
background: #B5B8D0 url(images/nav_bg.gif) repeat-y top left; /* << I CANT GET THIS TO REPEAT DOWN WITH THE CONTENT! */
}
/*-- header --*/
#header h1 {
border: none;
display: block;
height: 96px;
width: 755px;
background: #fff url(images/header.jpg) no-repeat top left;
}
#header h1 span {display:none;}
/*-- nav --*/
#nav {
width: 110px;
float:left;
background: #B5B8D0 url(images/nav_bg.gif) repeat-y top left;
}
ul#navlist {
list-style: none;
padding-left: 10px;
}
ul#navlist li {
display: block;
margin: 0;
padding: 0;
}
ul#navlist li a {
font-size: 1.1em;
font-weight:bold;
display: block;
width: 100%;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #063259;
text-decoration: none;
background: #B5B8D0;
}
#navcontainer>ul#navlist li a { width: auto; }
ul#navlist li#active a, ul#navlist li#active a:hover {
background: #fff;
color: #D5610C;
}
ul#navlist li a:hover, ul#navlist li#active a:hover {
color: #fff;
background: #B5B8D0;
border-color: #aaab9c #fff #fff #ccc;
}
/*--content--*/
#contentcontain {
width: 635px;
float:right;
background: transparent url(images/content_bg.gif) repeat-y top right;
}
#content {
margin: 15px 10px 0 40px;
background-color:#fff;
}
#footer {
background-color:#446CB5;
height: 8px;
width:755px;
margin: 0 auto;
clear:both;
}
#footer p {
padding: 15px 0 0 0;
color: #fff;
}
Here is my xHTML:
<!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>HRSG Users</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="ROBOTS" content="ALL" />
<meta name="Copyright" content="Copyright (c) 2004 HRSG" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="description" />
<meta name="keywords" content="keywords" />
<meta name="Rating" content="General" />
<meta name="revisit-after" content="5 Days" />
<meta name="doc-class" content="Living Document" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="icon" href="/favicon.ico" type="image/ico" />
<style type="text/css" media="screen,projection">
/* backslash hack hides from IEmac \*/
/* <![CDATA[ */
@import "compress-css.php?cssfile=css/screen.css&compressonly=1";
/* ]]> */
/* end hack */
</style>
<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->
<link rel="stylesheet"
type="text/css"
media="print" href="css/print.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>
<span>HRSG Users</span>
</h1>
</div>
<div id="nav">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
<img src="images/nav_cap.gif" width="141" height="312" alt="" />
</div>
<div id="contentcontain">
<div id="content">
<p> 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 facilisi. 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 facilisi. 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 facilisi. 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 acc</p><p> 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 facilisi. 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 facilisi. 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 facilisi. 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 acc</p>
</div>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
Thanks for the thread space. Anyone know how?
-Ryan
http://cupertino.j-tech.net/hrsgusers/www/
Here is my css:
/*-- body --*/
* {margin:0; padding:0;}
body {
margin-bottom: 10px;
font: small Avenir, "Lucida Grande", "Bitstream Vera Sans", lucida, arial, verdana, helvetica, sans-serif;
font-size: small !important; /* ua > v6 */
font-size /**/: x-small; /* ua < ie6 */
text-align: center;
color: #333;
background-color:#1D4898;
quotes: "\201C" "\201D" "\2018" "\2019";
}
/*-- typography --*/
p {
margin:0 0 .75em;
line-height:1.3em;
word-spacing: 0.1em
}
h1 {
font-size: 2.1em;
font-weight: normal;
letter-spacing: -0.02em;
}
h2 {
font-size: 1.8em;
font-weight: normal;
letter-spacing: -0.005em;
}
h3 {
font-size: 1.1em;
font-weight: bold;
font-style:oblique;
letter-spacing: -0.005em;
line-height: 1.2em;
}
h5 {
font-size: 1em;
font-weight: normal;
font-style: italic;
}
h6 {
font-size: 1em;
font-weight: normal;
}
sup {
font-size:70%;
font-style:oblique;
padding-top: 5px;
color:#999;
}
img {border: none;}
a img {border-width:0;}
.clearboth { clear:both;}
a:link, a:visited {
color: #00c;
text-decoration: underline;
}
a:focus, a:hover, a:active {
color: #00c;
text-decoration: none;
}
/*-- form style --*/
/* form */
form {
margin: .8em 0;
}
input, textarea, select {
background: #ECE9D8;
border: 3px double #ccc;
color: #666666;
margin: 2px 0 0 0;
}
input:hover, textarea:hover, select:hover {
background-color:#ffc;
border: 3px double #ccc;
color: #666666;
margin: 2px 0 0 0;
}
fieldset {
border-top: 10px solid #666;
border-bottom: none;
border-right: none;
border-left: none;
padding: 10px;
margin-bottom:5px;
}
legend {
background: transparent;
color: #950000;
font-size: 1.5em;
font-weight:bold;
margin: 5px 4px;
}
.required, .error {
background: transparent;
color: #990000;
font-weight: bold;
font-size:1.1em;
}
/***STRUCTURE --------------------------------- */
/*-- contain --*/
#container {
margin: 0 auto;
padding: 0;
width: 755px;
text-align: left;
background: #B5B8D0 url(images/nav_bg.gif) repeat-y top left; /* << I CANT GET THIS TO REPEAT DOWN WITH THE CONTENT! */
}
/*-- header --*/
#header h1 {
border: none;
display: block;
height: 96px;
width: 755px;
background: #fff url(images/header.jpg) no-repeat top left;
}
#header h1 span {display:none;}
/*-- nav --*/
#nav {
width: 110px;
float:left;
background: #B5B8D0 url(images/nav_bg.gif) repeat-y top left;
}
ul#navlist {
list-style: none;
padding-left: 10px;
}
ul#navlist li {
display: block;
margin: 0;
padding: 0;
}
ul#navlist li a {
font-size: 1.1em;
font-weight:bold;
display: block;
width: 100%;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #063259;
text-decoration: none;
background: #B5B8D0;
}
#navcontainer>ul#navlist li a { width: auto; }
ul#navlist li#active a, ul#navlist li#active a:hover {
background: #fff;
color: #D5610C;
}
ul#navlist li a:hover, ul#navlist li#active a:hover {
color: #fff;
background: #B5B8D0;
border-color: #aaab9c #fff #fff #ccc;
}
/*--content--*/
#contentcontain {
width: 635px;
float:right;
background: transparent url(images/content_bg.gif) repeat-y top right;
}
#content {
margin: 15px 10px 0 40px;
background-color:#fff;
}
#footer {
background-color:#446CB5;
height: 8px;
width:755px;
margin: 0 auto;
clear:both;
}
#footer p {
padding: 15px 0 0 0;
color: #fff;
}
Here is my xHTML:
<!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>HRSG Users</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="ROBOTS" content="ALL" />
<meta name="Copyright" content="Copyright (c) 2004 HRSG" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="description" />
<meta name="keywords" content="keywords" />
<meta name="Rating" content="General" />
<meta name="revisit-after" content="5 Days" />
<meta name="doc-class" content="Living Document" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="icon" href="/favicon.ico" type="image/ico" />
<style type="text/css" media="screen,projection">
/* backslash hack hides from IEmac \*/
/* <![CDATA[ */
@import "compress-css.php?cssfile=css/screen.css&compressonly=1";
/* ]]> */
/* end hack */
</style>
<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->
<link rel="stylesheet"
type="text/css"
media="print" href="css/print.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>
<span>HRSG Users</span>
</h1>
</div>
<div id="nav">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
<img src="images/nav_cap.gif" width="141" height="312" alt="" />
</div>
<div id="contentcontain">
<div id="content">
<p> 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 facilisi. 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 facilisi. 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 facilisi. 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 acc</p><p> 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 facilisi. 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 facilisi. 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 facilisi. 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 acc</p>
</div>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
Thanks for the thread space. Anyone know how?
-Ryan