stasile
02-06-2006, 06:02 AM
Been working on this for the past two days. I have checked the forums and have looked at some various sources on how to try and work around this problem using hacks and such, but I just can't wrap my head around it. Perhaps I've been staring at it too long?? :rolleyes:
What I'm trying to do is have the top and left side bar elements of the page stay in a fixed position while the middle content and footer scroll up and down. I can get it all to work beautifully in FF and Netscape, but IE has major problems. I'm hoping that you all in your infinite wisdom will be able to stear me in the right direction. :D Thanks in advance for any assistance you might be able to provide!
CSS :
body {
background-color: #d4c0a9;
color: #606040;
font-family: arial, helvetica, sans-serif;
font-size: 1em;
margin: 0;
}
p {
font-size: .8em;
text-align: center;
line-height: 1em;
}
h1 {
font-size: .1em;
color: #606040;
text-align: center;
letter-spacing: 0px;
}
p.content {
color: #606040;
font-size: 1.1em;
text-align: center;
}
p.links {
color: #606040;
font-size: 2em;
text-align: center;
}
p.footer {
color: #606040;
font-size: .6em;
text-align: center;
line-height: .2em;
}
a:link {
color: #A2A044;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #FFFBF0;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #606040;
background-color: transparent;
text-decoration: none;
}
a:active {
color: #A2A044;
background-color: transparent;
text-decoration: none;
}
#sheep-logo {
position: fixed;
background-image: url('Images/Page_Elements/sheep_logo.jpg');
height: 98px;
width: 100%;
top: 0px;
background-repeat: no-repeat;
z-index: 3;
overflow : visible;
}
#header-bar {
position: fixed;
background-image: url('Images/Page_Elements/header_bar_1_pixel.gif');
height: 98px;
width: 100%;
top: 0px;
left: 148px;
background-repeat: repeat-y;
z-index: 1;
}
#brown-header-bar {
position: fixed;
background-image: url('Images/Page_Elements/brown_header_bar.gif');
height: 49px;
width: 100%;
top: 20px;
left: 148px;
background-repeat: no-repeat;
z-index: 2;
}
#brown-side-bar {
position: fixed;
background-image: url('Images/Page_Elements/brown_side_bar.gif');
height: 790px;
width: 100%;
top: 98px;
left: 0px;
background-position: 0%;
background-repeat: repeat-y;
}
#main-content {
position: absolute;
background-image: url(blank.html);
top: 110px;
left: 275px;
}
#content-text {
position: absolute;
background-image: url(blank.html);
border: solid 0px #000000;
height: 250px;
width: 500px;
top: 520px;
left: 180px;
}
#internal-nav {
position: fixed;
top: 220px;
left: 380px;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
font-color: #646E63;
font-size: .787em;
color: #646E63;
}
#internal-nav ul li {
display: inline;
list-style-type: none;
padding-right: 100px;
color: #646E63;
}
#navlist {
position: fixed;
top: 150px;
left: 10px;
width: 150px;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
font-size: .787em;
line-height: 1.75em;
color: #A2A044;
list-style: none;
}
#navlist ul li {
list-style-type: none;
}
#navlist ul li a:link, #navlist ul li a:hover{
color: #FFFBF0;
text-decoration: none;
}
#navlist ul {
padding-left: 1px;
margin-left: 0;
}
#navlist ul li {
margin-left: 8px;
}
#navlist ul li.current a:link, #navlist ul li.current a:visited, #navlist ul li a:hover {
color: #A2A044;
background-repeat: no-repeat;
background-position: left center;
padding-left: 0px;
}
#footer {
position: absolute;
height: 75px;
width: 85%;
top: 798px;
padding-top: 1%;
}
HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="core-style-Art_In_Sheeps_Clothing-MASTER.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Art In Sheep's Clothing - Contemporary Fiber Art</title>
<meta name="description" content="Handmade Contemporary Needle Felted Artwork and Sculpture">
<meta name="keywords" content="Felt, Felted Art, Needle Felting, felt, wool felt, natural felt, acrylic felt, felt art, fiber art">
<link rel="shortcut icon" href="dog.ico" >
</head>
<body>
<h1>Art In Sheep's Clothing</h1>
<div id="header-bar">
</div>
<div id="sheep-logo">
</div>
<div id="brown-header-bar">
</div>
<div id="brown-side-bar">
</div>
<div id="main-content"><img src="Images/Page_Elements/GIFS/home.gif">
</div>
<div id="content-text"><p class="content">Thank you for visiting Art in Sheep's Clothing!</p>
<p class="content">I encourage you to look around as I add new things constantly and update class information.</p>
<p class="content">Please don't hesitate to contact me with any questions.</p>
<p class="content">I enjoy hearing from you!</p></div>
<div id="navlist">
<ul>
<li class="current"><a href="Index.html">Home</a></li>
<li><a href="Patios_Pathways.html">Contemporary Art</a></li>
<li><a href="Stone_Waterfalls.html">Fiber Sculptures</a></li>
<li><a href="Stone_BBQ.html">Classes</a></li>
<li><a href="Planting_Beds.html">What Is Felt</a></li>
<li><a href="Stone_Walls.html">About The Artist</a></li>
<li><a href="Other_Services.html">In The Media</a></li>
<li><a href="Contact_Us.html">Contact Me</a></li>
</ul>
</div>
<div id="footer">
<p class="footer"><a href="mailto:artinsheepsclothing@artinsheepsclothing.com">artinsheepsclothing@artinsheepsclothing.com</a></p>
<p class="footer">Copyright © 2006 Art In Sheep's Clothing • All Rights Reserved</p>
<p class="footer">Art In Sheep's Clothing Logos and ALL Works of Art are Property of Art In Sheep's Clothing</p>
<p class="footer">This site is best viewed at 1024x768</p></div>
</body>
</html>
What I'm trying to do is have the top and left side bar elements of the page stay in a fixed position while the middle content and footer scroll up and down. I can get it all to work beautifully in FF and Netscape, but IE has major problems. I'm hoping that you all in your infinite wisdom will be able to stear me in the right direction. :D Thanks in advance for any assistance you might be able to provide!
CSS :
body {
background-color: #d4c0a9;
color: #606040;
font-family: arial, helvetica, sans-serif;
font-size: 1em;
margin: 0;
}
p {
font-size: .8em;
text-align: center;
line-height: 1em;
}
h1 {
font-size: .1em;
color: #606040;
text-align: center;
letter-spacing: 0px;
}
p.content {
color: #606040;
font-size: 1.1em;
text-align: center;
}
p.links {
color: #606040;
font-size: 2em;
text-align: center;
}
p.footer {
color: #606040;
font-size: .6em;
text-align: center;
line-height: .2em;
}
a:link {
color: #A2A044;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #FFFBF0;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #606040;
background-color: transparent;
text-decoration: none;
}
a:active {
color: #A2A044;
background-color: transparent;
text-decoration: none;
}
#sheep-logo {
position: fixed;
background-image: url('Images/Page_Elements/sheep_logo.jpg');
height: 98px;
width: 100%;
top: 0px;
background-repeat: no-repeat;
z-index: 3;
overflow : visible;
}
#header-bar {
position: fixed;
background-image: url('Images/Page_Elements/header_bar_1_pixel.gif');
height: 98px;
width: 100%;
top: 0px;
left: 148px;
background-repeat: repeat-y;
z-index: 1;
}
#brown-header-bar {
position: fixed;
background-image: url('Images/Page_Elements/brown_header_bar.gif');
height: 49px;
width: 100%;
top: 20px;
left: 148px;
background-repeat: no-repeat;
z-index: 2;
}
#brown-side-bar {
position: fixed;
background-image: url('Images/Page_Elements/brown_side_bar.gif');
height: 790px;
width: 100%;
top: 98px;
left: 0px;
background-position: 0%;
background-repeat: repeat-y;
}
#main-content {
position: absolute;
background-image: url(blank.html);
top: 110px;
left: 275px;
}
#content-text {
position: absolute;
background-image: url(blank.html);
border: solid 0px #000000;
height: 250px;
width: 500px;
top: 520px;
left: 180px;
}
#internal-nav {
position: fixed;
top: 220px;
left: 380px;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
font-color: #646E63;
font-size: .787em;
color: #646E63;
}
#internal-nav ul li {
display: inline;
list-style-type: none;
padding-right: 100px;
color: #646E63;
}
#navlist {
position: fixed;
top: 150px;
left: 10px;
width: 150px;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
font-size: .787em;
line-height: 1.75em;
color: #A2A044;
list-style: none;
}
#navlist ul li {
list-style-type: none;
}
#navlist ul li a:link, #navlist ul li a:hover{
color: #FFFBF0;
text-decoration: none;
}
#navlist ul {
padding-left: 1px;
margin-left: 0;
}
#navlist ul li {
margin-left: 8px;
}
#navlist ul li.current a:link, #navlist ul li.current a:visited, #navlist ul li a:hover {
color: #A2A044;
background-repeat: no-repeat;
background-position: left center;
padding-left: 0px;
}
#footer {
position: absolute;
height: 75px;
width: 85%;
top: 798px;
padding-top: 1%;
}
HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="core-style-Art_In_Sheeps_Clothing-MASTER.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Art In Sheep's Clothing - Contemporary Fiber Art</title>
<meta name="description" content="Handmade Contemporary Needle Felted Artwork and Sculpture">
<meta name="keywords" content="Felt, Felted Art, Needle Felting, felt, wool felt, natural felt, acrylic felt, felt art, fiber art">
<link rel="shortcut icon" href="dog.ico" >
</head>
<body>
<h1>Art In Sheep's Clothing</h1>
<div id="header-bar">
</div>
<div id="sheep-logo">
</div>
<div id="brown-header-bar">
</div>
<div id="brown-side-bar">
</div>
<div id="main-content"><img src="Images/Page_Elements/GIFS/home.gif">
</div>
<div id="content-text"><p class="content">Thank you for visiting Art in Sheep's Clothing!</p>
<p class="content">I encourage you to look around as I add new things constantly and update class information.</p>
<p class="content">Please don't hesitate to contact me with any questions.</p>
<p class="content">I enjoy hearing from you!</p></div>
<div id="navlist">
<ul>
<li class="current"><a href="Index.html">Home</a></li>
<li><a href="Patios_Pathways.html">Contemporary Art</a></li>
<li><a href="Stone_Waterfalls.html">Fiber Sculptures</a></li>
<li><a href="Stone_BBQ.html">Classes</a></li>
<li><a href="Planting_Beds.html">What Is Felt</a></li>
<li><a href="Stone_Walls.html">About The Artist</a></li>
<li><a href="Other_Services.html">In The Media</a></li>
<li><a href="Contact_Us.html">Contact Me</a></li>
</ul>
</div>
<div id="footer">
<p class="footer"><a href="mailto:artinsheepsclothing@artinsheepsclothing.com">artinsheepsclothing@artinsheepsclothing.com</a></p>
<p class="footer">Copyright © 2006 Art In Sheep's Clothing • All Rights Reserved</p>
<p class="footer">Art In Sheep's Clothing Logos and ALL Works of Art are Property of Art In Sheep's Clothing</p>
<p class="footer">This site is best viewed at 1024x768</p></div>
</body>
</html>