0

I have element that I want to be a fixed position in css, but that specific when it is set to position: fixed; it causes my scrollbar to be disabled...why is that and what do i need to do to fix this...i do want this element to be fixed so when i scroll up and down the page its still in the same area... thanks

the css tag is i am talking is .profiles {position: fixed;}

here is the website on a test server if you want to see what i am talking about http://rusty813.netai.net/profiles.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
  
<body bgcolor="#000000">  
<div id="container">
  <div id="header">
    <div class="logo"></div>
    <div class="nav">
      <ul>    
        <li><a href="http://www.*****.com/***">***</a></li> |  
        <li><a href="http://www.*****.com/***">***</a></li> |
        <li><a href="http://www.*****.com/***">***</a></li> |
        <li><a href="http://www.*****.com/***">***</a></li> |
        <li><a href="http://www.*****.com/***">***</a></li> |
        <li><a href="http://www.*****.com/***">***</a></li> |
        <li><a href="http://www.*****.com/***">***</a></li> |
        <li><a href="http://www.*****.com/***">***</a></li>
      </ul>
    </div>
  </div>
  <div id="content">
    <div class="profiles">
    <ul>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb001.png" alt="***"/>***</a></li>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb002.png" alt="***"/>***</a></li>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb003.png" alt="***"/>***</a></li>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb004.png" alt="***"/>***</a></li>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb005.png" alt="***"/>***</a></li>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb006.png" alt="***"/>***</a></li>
      <li><a href="http://www.*****.com/***" title=""><img src="_files/thumb007.png" alt="***"/>***</a></li>
    </ul> 
    </div>	


       <table width="100%" cellpadding="0" cellspacing="0" border="0">
	    <tr>
              <td width="230" valign="top">
                <div align="center" id="mainphoto">
                  <a href=""><img src="images/profiles/***.png" class="profile_image" border="0" alt=""/></a>
                </div>
	          </td>
		</tr>
		</table>
       <table class="maintable" cellpadding="0" cellspacing="0" border="0" align="center">
             <tr>
               <td id="info" valign="top">
                 <h1>***</h1>
                   Female<br />
                   26 years old<br />
                   Houston, Texas, US<br />
               </td>
			 </tr>
			 <tr>
			   <td>
                 <div class="head">About me</div>
                 <div class="post"><p>Text here Text hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText here</p></div>
               </td>
	         </tr>
       
   <br />
   <tr>
   <td>
    <div class="gallery">
      <ul>
        <li><a href="images/profiles/model_1/image001.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image001.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image002.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image002.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image003.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image003.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image004.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image004.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image005.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image005.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image006.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image006.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image007.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image007.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image008.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image008.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image009.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image009.jpg" width="100" height="100" border="0" alt=""/></a></li>						
      </ul>
    </div>
	</td>
	</tr>
	</table>
  </div>
</div>
</body>
</html>
#header {
	position: fixed;
	z-index: 999;
}

.logo {
	position: fixed;
	background-image: url(../images/logo/logo2.png);
	width: 567px;
	height: 252px;
	top: 8px;
	left: 775px;
}

.nav {
	position: fixed;
	top: 70px;
	left: -20px;
}

.nav a{
	text-decoration: none;
	font-family: segoe script;
	font-weight: bold;
	font-size: 16px;
	color: #ec2c49;
}

.nav ul {
	word-spacing: 8px;
	font-family: segoe script;
	color: #ec2c49;
}

.nav ul li {
	display: inline;
}

#content {
	position: relative;
	top: 125px;
}
#fadeshow1, #fadeshow1 .gallerylayer {
	position: relative;
	background-color:transparent!important;
	left: 20px;
	z-index: 997;
}

#text1 {
	position: absolute;
	top: 100px;
	left: 550px;
	width: 550px;
	font-family: "segoe script";
	font-size: 20px;
	color: #4b2701;
	font-style: italic;
	font-weight: bold;
	z-index: 998;
}

.blog {
	position: relative;
	left: 200px;
}


.maintable {
	color: #ffffff;
	position: absolute;
	top: -25px;
	left: 220px;
	width: 60%;
}

.gallery ul {
	border-style: none;
	word-spacing: 8px;
	font-family: segoe script;
	color: #ec2c49;
}

.gallery ul li {
	display: inline;
}

.profiles {
	position: fixed;
}

.profiles img {
	border: 0;
}

.profiles ul {
	margin: 0;
	list-style-type: none;

}

.profiles li {
	margin: 2px 0;
	padding: 4px;
	background: url(../images/profilebg/individual_bg.png) no-repeat;
	height: 62px;
	width: 151px;
}

.profiles li img {
	vertical-align: middle;
	margin-right: 20px;
}

.profiles li a {
	font-family: segoe script;
	font-weight: bold;
	color: #e6930f;
	text-decoration: none;
	font-size: 15px;
}
3
Contributors
2
Replies
4
Views
6 Years
Discussion Span
Last Post by Bestwebdesign
0

Hi,

You had inserted position fixed in the nav class also, so delete that one.

logo {
	position: fixed;
	background-image: url(../images/logo/logo2.png);
	width: 567px;
	height: 252px;
	top: 8px;
	left: 775px;
}
 
.nav {
	top: 70px;
	left: -20px;
}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.