Menu
Hello,
Im a student and Im baffled with my HTML code.
I’m writing a rather simple page and have ran into a rather weird bug that I can not seem to fix.
The div labeled .navbanner is supposed to be a vertical banner that is fixed so it stays in one place which it does but this banner keeps vanishing in a weird way.
1st my problem was in ie7 and firefox 7.0.1. What would happen is if I had 3 paragraphs everything was fine. If I added 3 more paragraphs the navbanner would vanish in both IE and firefox. once I added 3 or 4 more paragraphs it would come back.
somehow I unknowingly fixed it in firefox but now Ie will display it until you refresh, then it disappears. it will then come back again on another refresh about 50% of the time.
If anyone has seen this or know what’s going on and how to fix it please show me. I’m really stumped by this one.
Thanks
here is the entire code:
[code]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Strict//EN”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Cecil Designs</title>
<style type=”text/css”>
html
{
height:100%;
}
body
{
background: #333;
margin-top: 25px;
margin: 0;
padding: 0;
text-align: center;
height: 100%;
}
.container
{
width: 960px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.navbanner
{
background: #000;
width:200px;
height: 100%;
padding-top: 100px;
padding-left: 10px;
padding-right: 10px;
text-align:center;
position:fixed;
float: left;
}
.content
{
width: 730px;
padding-top: 100px;
height: auto;
text-align: left;
float: right;
}
.footer
{
padding-top: 20px;
padding-left: 10px;
width: 200px;
height: 50px;
text-align: left;
clear: both;
position:relative;
z-index: 4;
margin-right: 760px;;
margin-left: auto;
}
p
{
color: #fff;
}
h1
{
font-size:24px;
color: #B0D57B;
}
h2
{
font-size:20px;
color: #B0D57B;
border-top: solid #333;
line-height: 10px;
padding-top: 15px;
}
a img
{
border: none;
}
a:link
{
color:#B0D57B;
text-decoration: none;
}
a:visited
{
color:#B0D57B;
text-decoration: none;
}
a:hover
{
color:#B0D57B;
text-decoration: underline;
}
a:active
{
color:#B0D57B;
text-decoration: none;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”navbanner”>
<h2><a href=”index.html”>Home</a></h2>
<h2><a href=”about.html”>About us</a></h2>
<h2><a href=”portfolio.html”>Our Work</a></h2>
<h2><a href=”contact.html”>Contact Us</a></h2>
</div>
<div class=”content”>
<h1>Content goes here</h1>
<div >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut urna quam, in imperdiet lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam commodo sem tincidunt lacus euismod sed imperdiet odio ultrices. Nam semper leo id lacus dictum vitae lobortis erat pellentesque. Aenean et felis vel enim laoreet sodales eu vitae libero. Duis condimentum eros quis nunc pretium lacinia. Aliquam vitae tellus non tortor imperdiet posuere id pellentesque nisi. Quisque rhoncus, tellus vitae aliquet porttitor, magna velit condimentum augue, ac euismod dolor urna nec sapien. Phasellus id nulla mauris, ac dignissim felis. </p>
<p> Nam eu neque in lectus feugiat consectetur egestas a justo. Quisque luctus mollis eros non sodales. Donec lacinia, elit at egestas ullamcorper, justo diam varius orci, et congue velit augue eget enim. Integer rutrum neque a justo auctor vel euismod turpis dignissim. Nunc eu leo tortor, sit amet molestie tellus. Mauris sit amet dui augue. Curabitur eleifend congue metus quis mollis. Morbi eu urna ut urna vestibulum mattis eget sit amet dui. Quisque tincidunt vehicula sapien eget volutpat. Ut vel blandit magna. Suspendisse eget leo quam. Morbi placerat dolor nec magna tempor at tristique arcu convallis. Aliquam vestibulum sagittis placerat. Proin id tellus vel nulla interdum mattis. Donec ac sem nec nisl egestas fermentum. Aenean mauris neque, eleifend in feugiat quis, dapibus id mi. </p>
<p> Nullam volutpat mollis sem ut varius. Nam id nisl quam, sed pulvinar velit. Nulla accumsan, dui sit amet lacinia faucibus, est nisl vulputate lorem, sit amet convallis felis est eget magna. In ac purus sit amet risus placerat semper. Morbi rhoncus fringilla dui et cursus. Donec ut nulla justo, ac tristique odio. Aliquam erat volutpat. Duis pharetra pulvinar magna, ac porttitor felis varius et. Suspendisse nec leo sit amet purus cursus luctus. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut urna quam, in imperdiet lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam commodo sem tincidunt lacus euismod sed imperdiet odio ultrices. Nam semper leo id lacus dictum vitae lobortis erat pellentesque. Aenean et felis vel enim laoreet sodales eu vitae libero. Duis condimentum eros quis nunc pretium lacinia. Aliquam vitae tellus non tortor imperdiet posuere id pellentesque nisi. Quisque rhoncus, tellus vitae aliquet porttitor, magna velit condimentum augue, ac euismod dolor urna nec sapien. Phasellus id nulla mauris, ac dignissim felis. </p>
<p> Nam eu neque in lectus feugiat consectetur egestas a justo. Quisque luctus mollis eros non sodales. Donec lacinia, elit at egestas ullamcorper, justo diam varius orci, et congue velit augue eget enim. Integer rutrum neque a justo auctor vel euismod turpis dignissim. Nunc eu leo tortor, sit amet molestie tellus. Mauris sit amet dui augue. Curabitur eleifend congue metus quis mollis. Morbi eu urna ut urna vestibulum mattis eget sit amet dui. Quisque tincidunt vehicula sapien eget volutpat. Ut vel blandit magna. Suspendisse eget leo quam. Morbi placerat dolor nec magna tempor at tristique arcu convallis. Aliquam vestibulum sagittis placerat. Proin id tellus vel nulla interdum mattis. Donec ac sem nec nisl egestas fermentum. Aenean mauris neque, eleifend in feugiat quis, dapibus id mi. </p>
<p> Nam eu neque in lectus feugiat consectetur egestas a justo. Quisque luctus mollis eros non sodales. Donec lacinia, elit at egestas ullamcorper, justo diam varius orci, et congue velit augue eget enim. Integer rutrum neque a justo auctor vel euismod turpis dignissim. Nunc eu leo tortor, sit amet molestie tellus. Mauris sit amet dui augue. Curabitur eleifend congue metus quis mollis. Morbi eu urna ut urna vestibulum mattis eget sit amet dui. Quisque tincidunt vehicula sapien eget volutpat. Ut vel blandit magna. Suspendisse eget leo quam. Morbi placerat dolor nec magna tempor at tristique arcu convallis. Aliquam vestibulum sagittis placerat. Proin id tellus vel nulla interdum mattis. Donec ac sem nec nisl egestas fermentum. Aenean mauris neque, eleifend in feugiat quis, dapibus id mi. </p>
<p> Nam eu neque in lectus feugiat consectetur egestas a justo. Quisque luctus mollis eros non sodales. Donec lacinia, elit at egestas ullamcorper, justo diam varius orci, et congue velit augue eget enim. Integer rutrum neque a justo auctor vel euismod turpis dignissim. Nunc eu leo tortor, sit amet molestie tellus. Mauris sit amet dui augue. Curabitur eleifend congue metus quis mollis. Morbi eu urna ut urna vestibulum mattis eget sit amet dui. Quisque tincidunt vehicula sapien eget volutpat. Ut vel blandit magna. Suspendisse eget leo quam. Morbi placerat dolor nec magna tempor at tristique arcu convallis. Aliquam vestibulum sagittis placerat. Proin id tellus vel nulla interdum mattis. Donec ac sem nec nisl egestas fermentum. Aenean mauris neque, eleifend in feugiat quis, dapibus id mi. </p>
<p> Nam eu neque in lectus feugiat consectetur egestas a justo. Quisque luctus mollis eros non sodales. Donec lacinia, elit at egestas ullamcorper, justo diam varius orci, et congue velit augue eget enim. Integer rutrum neque a justo auctor vel euismod turpis dignissim. Nunc eu leo tortor, sit amet molestie tellus. Mauris sit amet dui augue. Curabitur eleifend congue metus quis mollis. Morbi eu urna ut urna vestibulum mattis eget sit amet dui. Quisque tincidunt vehicula sapien eget volutpat. Ut vel blandit magna. Suspendisse eget leo quam. Morbi placerat dolor nec magna tempor at tristique arcu convallis. Aliquam vestibulum sagittis placerat. Proin id tellus vel nulla interdum mattis. Donec ac sem nec nisl egestas fermentum. Aenean mauris neque, eleifend in feugiat quis, dapibus id mi. </p>
</div>
</div>
<div class=”footer”>
<p>Cecil Digital Designs © 2011. </p>
</div>
</div>
</body>
</html>