Still having the issue of one of my background (the butterfly image) images that I set for the container. The image shows in I.E. but in FF the image is hidden (which I am guessing is from the wrap background covering it up)
Link to Site (http://www.suburbanette.com/test/)
The new CSS coding
html, body {
background: url(images/background.gif) repeat-x;
background-attachment: fixed;
margin: 0px;
height:100%;
}
#wrap {
width: 714px;
margin-left: auto;
margin-right: auto;
min-height:100%;
background: #E1E1E1 url(images/containerbackground.gif) repeat-y center;
}
* html #wrap {
height:100%;
}
* html #container {
width: 714px;
margin: 0px;
margin-left: auto;
margin-right: auto;
height:100%;
min-height:100%;
background: #E1E1E1 url(images/butterfly.jpg) no-repeat;
border-left: #C7C7C7 1px solid;
border-right: #C7C7C7 1px solid;
}
#leftcol {
float: left;
width: 220px;
\width: 230px;
w\idth: 220px;
margin-top: 150px;
padding: 9px;
}
#maincol {
margin-left: 264px;
padding: 10px;
font-family: Arial, sans-serif;
text-align: justify;
font-size: 13px;
}
#navcontainer {
width: 12em;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Arial, Verdana, sans-serif;
color: #333;
font-size: 14px;
font-weight: bold;
letter-spacing: .5em;
}
#navcontainer ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
background: transparent url(images/navbackground.gif);
}
#navcontainer li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#navcontainer li a {
display: block;
padding: 5px 5px 5px 0.5em;
color: #A39F90;
text-decoration: none;
width: 100%;
}
html>body #navcontainer li a { width: auto; }
#navcontainer li a:hover {
background-color: #91A1AC;
color: #fff;
}
The HTML
<body>
<div id="wrap">
<div id="container"><div id="leftcol"><div id="navcontainer"><ul id="navlist">
<li><a href="#" title="Back to the main page">HOME</a></li>
<li><a href="#" title="Information about the domain">DOMAIN</a></li>
<li><a href="#" title="Information about the owner">ABOUT</a></li>
<li><a href="#" title="Gallery of my photography">GALLERY</a></li>
<li><a href="#" title="Other things I am working on">PROJECTS</a></li>
<li><a href="#" title="Links elswhere and contact information">LINKS</a></li>
</ul></div></div>
<div id="maincol"><h2 class="title">Welcome | September 02, 2005</h2>
<p>Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.</p>
<p>Ulysses, Ulysses - Soaring through all the galaxies. In search of Earth, flying in to the night. Ulysses, Ulysses - Fighting evil and tyranny, with all his power, and with all of his might. Ulysses - no-one else can do the things you do. Ulysses - like a bolt of thunder from the blue. Ulysses - always fighting all the evil forces bringing peace and justice to all.</p>
<p>Children of the sun, see your time has just begun, searching for your ways, through adventures every day. Every day and night, with the condor in flight, with all your friends in tow, you search for the Cities of Gold. Ah-ah-ah-ah-ah... wishing for The Cities of Gold. Ah-ah-ah-ah-ah... some day we will find The Cities of Gold. Do-do-do-do ah-ah-ah, do-do-do-do, Cities of Gold. Do-do-do-do, Cities of Gold. Ah-ah-ah-ah-ah... some day we will find The Cities of Gold.</p>
<p>Thunder, thunder, thundercats, Ho! Thundercats are on the move, Thundercats are loose. Feel the magic, hear the roar, Thundercats are loose. Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thundercats!</p>
<div class="posted">Posted by Charlene</div>
</div></div>
</div>
</body>