JadieGlitch
09-19-2008, 05:30 PM
I am trying to get the left hand side of my page to be 'position:fixed;'
When I have a comment in the very top of the page it doesn't work, but the rest of the page displays correctly.
When I remove the comment, the 'position:fixed;' activates, but the rest of the page formatting is wrong.
How can a simple comment do this?? I've even had people at the software company that I work say "Whoa... I have never seen that before.. and I don't know how to fix it... good luck with that...".
Here is my page (HomePage.jsp)
<!-- Jadie's Colubrids
Author: Jeannie M. Davis
Page: HomePage.jsp
Inception: 08.11.2008
ŠJadies's Colubrids All Rights Reserved.
Purpose: This module is designed for HTML
and CSS training purposes.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Jadie's Colubrids</title>
<script type="text/javascript"></script>
<link href="D:\Play\PersonalWebsite\WebContent\CSS\Style.css" type="text/css"
rel="stylesheet" media = "all"/>
</head>
<body>
<!-- This chunk of code handles the fixed bar of information on the left-hand side of the page -->
<div id="containerJadiesColubrids">
<div id="introJadie">
<div id="pageJadie"></div>
</div>
<div id="introColubrid">
<div id="pageColubrids"></div>
</div>
<div id="quickSummary">
<p class="p1"><span></span></p>
<p class="p2"><span><a href="" title="">e-mail</a></span></p>
<p class="p3"><span><a href="Available.jsp" title="">Available Snakes</a></span></p>
<p class="p4"><span><a href="PhotoGallery.jsp" title="">Photo Gallery</a></span></p>
<p class="p5"><span><a href="BreedingStock.jsp" title="">Breeding Stock</a></span></p>
<p class="p6"><span><a href="MorphGuide.jsp" title="">Morph Guide</a></span></p>
<p class="p7"><span><a href="Shipping.jsp" title="">Shipping Info</a></span></p>
<p class="p8"><span><a href="Store.jsp" title="">Store</a></span></p>
<p class="p9"><span><a href="Sold.jsp" title="">Sold</a></span></p>
</div>
<!-- This chunk handles the right hand side of the page with the text in it.
It is included within the 'containerJadiesColubrids'-->
<div id="News">
<h3><span>News</span></h3>
<p class="p1"><span>Welcome to the Launch of Jadie's Colubrids!</span></p>
<p class="p2"><span>I will try to update as much as possible and I hope you check back often for new and interesting things.</span></p>
<p class="p3"><span>Filler for p3</span></p>
</div>
<div id="supportingText">
<div id="explanation">
<h3><span>What is a Colubrid?</span></h3>
<p class="p1"><span>A colubrid (from Latin coluber, snake) is a snake that is a member of the Colubridae family. It is a broad classification of snakes that includes well over half of all snake species on earth. A colubrid's body is almost completely covered in scales. While most colubrids are non-venomous (or have venom that isn't known to be harmful to humans) and are normally harmless, a few groups, such as genus Boiga, can produce medically significant bites. In addition, the Boomslang and African Twig Snake have both caused human fatalities.The venom-injecting fangs associated with venomous colubrids are almost always in the back of the mouth, compared to vipers and elapids. The Colubrids are certainly not a natural group, as many are more closely related to other groups, such as elapids, than to each other. This family has classically been a dumping ground for snakes that don't fit anywhere else. There is on-going mitochondrial DNA research which will sort out the familiar relations within this group.A colubrid (from Latin coluber, snake) is a snake that is a member of the Colubridae family. It is a broad classification of snakes that includes well over half of all snake species on earth. A colubrid's body is almost completely covered in scales. While most colubrids are non-venomous (or have venom that isn't known to be harmful to humans) and are normally harmless, a few groups, such as genus Boiga, can produce medically significant bites. In addition, the Boomslang and African Twig Snake have both caused human fatalities.The venom-injecting fangs associated with venomous colubrids are almost always in the back of the mouth, compared to vipers and elapids. The Colubrids are certainly not a natural group, as many are more closely related to other groups, such as elapids, than to each other. This family has classically been a dumping ground for snakes that don't fit anywhere else. There is on-going mitochondrial DNA research which will sort out the familiar relations within this group.</span></p>
<p class="p2"><span>Link to the <a href = "http://en.wikipedia.org/wiki/Colubridae">original article</a></span></p>
</div>
<div id="footer">
<a href="">Home</a>
<a href="">Contact Us</a>
<a href="">FAQs</a>
<a href="http://www.cornsnakes.com">The Cornsnake Info Forums</a>
<a href="">Tribute</a>
</div>
</div>
<!-- This is the image rotation for the PhotoGallery feature -->
<div id="linkList">
<div id="lselect">
<h3 class="select"><span>Photos:</span></h3>
<ul>
<li>
<!-- Images rotate here. -->
<a href="WebContent/PictureArchive/Archive.jsp" >
<script language="javascript" type="text/javascript">
var slideShowSpeed = 1900; // Set slideShowSpeed (milliseconds)
var crossFadeDuration = 3; // Duration of crossfade (seconds).
var arrBanner = new Array();
arrBanner[0] = 'IMAGES/Isis.gif'
arrBanner[1] = 'IMAGES/Calcifer.gif'
arrBanner[2] = 'IMAGES/RahBehKaa.gif'
arrBanner[3] = 'IMAGES/Delilah.gif'
arrBanner[4] = 'IMAGES/Isis2.gif'
function initSlideShow() {
var preLoad = new Array();
for (var i = 0; i < arrBanner.length; i++) {
preLoad[i] = new Image();
preLoad[i].src = arrBanner[i];
}
var rndId = Math.floor(Math.random()*arrBanner.length);
document.write('<img src="'+arrBanner[rndId]+'" name="SlideShow" id="SlideShow" width="200" height="150" />');
window.setInterval('runSlideShow()', slideShowSpeed);
} // initSlideShow.
function runSlideShow(){
rndId = Math.floor(Math.random()*arrBanner.length);
if (document.all){
document.images.SlideShow.style.filter = "blendTrans(duration=2)";
document.images.SlideShow.style.filter = "blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply() ;
}
document.images.SlideShow.src = arrBanner[rndId];
if (document.all){
document.images.SlideShow.filters.blendTrans.Play();
}
} // runSlideShow.
initSlideShow();
</script>
</a>submitted by Jadie
</li>
</ul>
</div>
<!-- This is where the the image rotation for the StoreGallery feature will go -->
<div id="lStore">
<h3 class="Store"><span>Store:</span></h3>
<ul>
<li>
<a href="WebContent/IMAGES/ReptiBark.gif">
<img id="rotate_img" src="IMAGES/ReptiBark.gif" width = "150" height = "200" alt="Isis" />
</a> 8lbs for $19.99
</li>
</ul>
</div>
<!-- This is in the middle white space below the Image Rotators -->
<div id="lresources">
<h3 class="resources"><span>Resources:</span></h3>
<ul>
<li><a href="http://www.beanfarm.com/store/agora.cgi?cart_id=2050976.5791&p_id=12093&xm=on"><span>Cornsnakes by Kathy Love</span></a></li>
<li><a href="http://www.beanfarm.com/store/agora.cgi?cart_id=2050976.5791&p_id=12092&xm=on"><span>Cornsnakes in Captivity by Dan Soderberg</span></a></li>
<li><a href="http://www.beanfarm.com/store/agora.cgi?cart_id=2050976.5791&p_id=12094&xm=on"><span>Cornsnake Morph Guide</span></a></li>
<li><a href="http://www.cornsnakes.com"><span>Cornsnakes.com</span></a></li>
<li><a href="http://www.cornutopia.com"><span>Cornutopia</span></a></li>
</ul>
</div>
</div>
</div>
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>
</body>
</html>
When I have a comment in the very top of the page it doesn't work, but the rest of the page displays correctly.
When I remove the comment, the 'position:fixed;' activates, but the rest of the page formatting is wrong.
How can a simple comment do this?? I've even had people at the software company that I work say "Whoa... I have never seen that before.. and I don't know how to fix it... good luck with that...".
Here is my page (HomePage.jsp)
<!-- Jadie's Colubrids
Author: Jeannie M. Davis
Page: HomePage.jsp
Inception: 08.11.2008
ŠJadies's Colubrids All Rights Reserved.
Purpose: This module is designed for HTML
and CSS training purposes.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Jadie's Colubrids</title>
<script type="text/javascript"></script>
<link href="D:\Play\PersonalWebsite\WebContent\CSS\Style.css" type="text/css"
rel="stylesheet" media = "all"/>
</head>
<body>
<!-- This chunk of code handles the fixed bar of information on the left-hand side of the page -->
<div id="containerJadiesColubrids">
<div id="introJadie">
<div id="pageJadie"></div>
</div>
<div id="introColubrid">
<div id="pageColubrids"></div>
</div>
<div id="quickSummary">
<p class="p1"><span></span></p>
<p class="p2"><span><a href="" title="">e-mail</a></span></p>
<p class="p3"><span><a href="Available.jsp" title="">Available Snakes</a></span></p>
<p class="p4"><span><a href="PhotoGallery.jsp" title="">Photo Gallery</a></span></p>
<p class="p5"><span><a href="BreedingStock.jsp" title="">Breeding Stock</a></span></p>
<p class="p6"><span><a href="MorphGuide.jsp" title="">Morph Guide</a></span></p>
<p class="p7"><span><a href="Shipping.jsp" title="">Shipping Info</a></span></p>
<p class="p8"><span><a href="Store.jsp" title="">Store</a></span></p>
<p class="p9"><span><a href="Sold.jsp" title="">Sold</a></span></p>
</div>
<!-- This chunk handles the right hand side of the page with the text in it.
It is included within the 'containerJadiesColubrids'-->
<div id="News">
<h3><span>News</span></h3>
<p class="p1"><span>Welcome to the Launch of Jadie's Colubrids!</span></p>
<p class="p2"><span>I will try to update as much as possible and I hope you check back often for new and interesting things.</span></p>
<p class="p3"><span>Filler for p3</span></p>
</div>
<div id="supportingText">
<div id="explanation">
<h3><span>What is a Colubrid?</span></h3>
<p class="p1"><span>A colubrid (from Latin coluber, snake) is a snake that is a member of the Colubridae family. It is a broad classification of snakes that includes well over half of all snake species on earth. A colubrid's body is almost completely covered in scales. While most colubrids are non-venomous (or have venom that isn't known to be harmful to humans) and are normally harmless, a few groups, such as genus Boiga, can produce medically significant bites. In addition, the Boomslang and African Twig Snake have both caused human fatalities.The venom-injecting fangs associated with venomous colubrids are almost always in the back of the mouth, compared to vipers and elapids. The Colubrids are certainly not a natural group, as many are more closely related to other groups, such as elapids, than to each other. This family has classically been a dumping ground for snakes that don't fit anywhere else. There is on-going mitochondrial DNA research which will sort out the familiar relations within this group.A colubrid (from Latin coluber, snake) is a snake that is a member of the Colubridae family. It is a broad classification of snakes that includes well over half of all snake species on earth. A colubrid's body is almost completely covered in scales. While most colubrids are non-venomous (or have venom that isn't known to be harmful to humans) and are normally harmless, a few groups, such as genus Boiga, can produce medically significant bites. In addition, the Boomslang and African Twig Snake have both caused human fatalities.The venom-injecting fangs associated with venomous colubrids are almost always in the back of the mouth, compared to vipers and elapids. The Colubrids are certainly not a natural group, as many are more closely related to other groups, such as elapids, than to each other. This family has classically been a dumping ground for snakes that don't fit anywhere else. There is on-going mitochondrial DNA research which will sort out the familiar relations within this group.</span></p>
<p class="p2"><span>Link to the <a href = "http://en.wikipedia.org/wiki/Colubridae">original article</a></span></p>
</div>
<div id="footer">
<a href="">Home</a>
<a href="">Contact Us</a>
<a href="">FAQs</a>
<a href="http://www.cornsnakes.com">The Cornsnake Info Forums</a>
<a href="">Tribute</a>
</div>
</div>
<!-- This is the image rotation for the PhotoGallery feature -->
<div id="linkList">
<div id="lselect">
<h3 class="select"><span>Photos:</span></h3>
<ul>
<li>
<!-- Images rotate here. -->
<a href="WebContent/PictureArchive/Archive.jsp" >
<script language="javascript" type="text/javascript">
var slideShowSpeed = 1900; // Set slideShowSpeed (milliseconds)
var crossFadeDuration = 3; // Duration of crossfade (seconds).
var arrBanner = new Array();
arrBanner[0] = 'IMAGES/Isis.gif'
arrBanner[1] = 'IMAGES/Calcifer.gif'
arrBanner[2] = 'IMAGES/RahBehKaa.gif'
arrBanner[3] = 'IMAGES/Delilah.gif'
arrBanner[4] = 'IMAGES/Isis2.gif'
function initSlideShow() {
var preLoad = new Array();
for (var i = 0; i < arrBanner.length; i++) {
preLoad[i] = new Image();
preLoad[i].src = arrBanner[i];
}
var rndId = Math.floor(Math.random()*arrBanner.length);
document.write('<img src="'+arrBanner[rndId]+'" name="SlideShow" id="SlideShow" width="200" height="150" />');
window.setInterval('runSlideShow()', slideShowSpeed);
} // initSlideShow.
function runSlideShow(){
rndId = Math.floor(Math.random()*arrBanner.length);
if (document.all){
document.images.SlideShow.style.filter = "blendTrans(duration=2)";
document.images.SlideShow.style.filter = "blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply() ;
}
document.images.SlideShow.src = arrBanner[rndId];
if (document.all){
document.images.SlideShow.filters.blendTrans.Play();
}
} // runSlideShow.
initSlideShow();
</script>
</a>submitted by Jadie
</li>
</ul>
</div>
<!-- This is where the the image rotation for the StoreGallery feature will go -->
<div id="lStore">
<h3 class="Store"><span>Store:</span></h3>
<ul>
<li>
<a href="WebContent/IMAGES/ReptiBark.gif">
<img id="rotate_img" src="IMAGES/ReptiBark.gif" width = "150" height = "200" alt="Isis" />
</a> 8lbs for $19.99
</li>
</ul>
</div>
<!-- This is in the middle white space below the Image Rotators -->
<div id="lresources">
<h3 class="resources"><span>Resources:</span></h3>
<ul>
<li><a href="http://www.beanfarm.com/store/agora.cgi?cart_id=2050976.5791&p_id=12093&xm=on"><span>Cornsnakes by Kathy Love</span></a></li>
<li><a href="http://www.beanfarm.com/store/agora.cgi?cart_id=2050976.5791&p_id=12092&xm=on"><span>Cornsnakes in Captivity by Dan Soderberg</span></a></li>
<li><a href="http://www.beanfarm.com/store/agora.cgi?cart_id=2050976.5791&p_id=12094&xm=on"><span>Cornsnake Morph Guide</span></a></li>
<li><a href="http://www.cornsnakes.com"><span>Cornsnakes.com</span></a></li>
<li><a href="http://www.cornutopia.com"><span>Cornutopia</span></a></li>
</ul>
</div>
</div>
</div>
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>
</body>
</html>