Css "position: fixed;" causing scrollbar to be disable

hangman21 · Jan 25, 2011

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;}

Code:

#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;
}

yilduz · Jan 25, 2011

Nothing looks weird. Maybe it's some of the other code in the page conflicting with the css?

hangman21 · Jan 25, 2011

Code:

<!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>

yilduz · Jan 27, 2011

That code looks very straight-forward as well. What are those javascript files?

learnow.co

nonton168.tv

zaka.tv

restaurantealcarbon.es

protagonista.com.co

fzmovie.co.za

luckycatcannabis.co

bigdiscountcourse.info

scmpaqueteria.mx

podifygift.com

Css "position: fixed;" causing scrollbar to be disable

Established Member

Your face is regfee!Established Member

Established Member

Your face is regfee!Established Member

PoliceUS.Com

FreeportPlumbing.com

AlbinLandscaping.com

EmersonPestControl.com

eBitcoinWallet.com

nihilix.com

xhmh.com

MyCapitalWallet.com

BoomBake.com

EntryMusic.com

Similar threads

We're social

PoliceUS.Com

FreeportPlumbing.com

AlbinLandscaping.com

EmersonPestControl.com

eBitcoinWallet.com

nihilix.com

xhmh.com

MyCapitalWallet.com

BoomBake.com

EntryMusic.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling