#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0

    Exclamation Content scrolling over/on top of static top nav


    So, my previous post got deleted, which was kinda sucky since I am legitimately asking for help and my deadline is tomorrow.

    ampersand web studio dot com slash dev slash officepal slash homepage dot html

    The button and some of the content is scrolling OVER the fixed position nav rather than under it. I am including the code this time, but to really understand what I am talking about you have to see it. Either download the code and make it work or go to the website it doesn't matter but PLEASE don't delete my post! I don't know where else to go!

    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>Officepal Homepage</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div class="navigation">
      <div class="navmodule">
    		<div class="logo"></div><!---logo closed--->
    		<div class="navmenu">
            	<img src="images/user.png" width="30" height="30" border="0" /><span class="username">Jenny Jones</span>
                <img src="images/nav-divider.png" width="2" height="29" border="0" />
    	  		<img src="images/notificationpositive.png" width="30" height="30" class="notify" border="0" /><span class="new">13</span>
                <img src="images/nav-divider.png" width="2" height="29" border="0" />
                <img src="images/home-active.png" width="30" height="30" border="0" />
                <img src="images/nav-divider.png" width="2" height="29" border="0" />
                <img src="images/settings-inactive.png" width="30" height="30" border="0"/>
            </div><!---navmenu closed--->
      		<img src="images/carrot.png" width="60" height="12" class="activehome"/>
      </div><!---navmodule closed--->
    </div><!---navigation closed--->
    
    <div class="clear"></div>
    
    <div class="askbox">
      <div style="float:left;">
    	<input type="text" name="s" id="ask" class="ask" value=" Ask officepals..." />
      </div>
      <span class="from">from</span> 
      <div id="locationcssmenu">
    	<ul id="location" class="topmenu">
    		<li class="toplast"><a href="#">San Francisco Bay Area<img src="images/dropdown.png" width="12" height="10"border="0"></a>
    		<ul>
    			<li><a href="#"><img src="images/searchicon.png" width="17" height="14" border="0"> Search for your location</a></li>
    			<li><a href="#">Seattle Area</a></li>
    			<li><a href="#">Chicago Area</a></li>
    			<li><a href="#">New York City Area</a></li>
    		</ul></li>
    	</ul>
      </div>
    </div><!---askbox closed--->
    
    <div class="contentbox">
    	<div class="header">Recent Questions</div>
    	<div class="menu1home">San Francisco Bay Area <img src="images/menudown.png" width="9" height="8" border="0"/></div>
    	<div class="menu2home"><a href="#.html">My Company (10)</a></div>
    	<div class="menu3home"><a href="#.html">My Network (20)</a></div>
    	<div class="menu4home"><a href="#.html">All Over The World (100)</a></div>
    
    <div class="clear"></div>
    
    <div class="questionboxcontent"> 
    	<img src="images/userimage.png" width="50" height="50" class="image-level1" border="0"/>
    	<div class="text-level1">
    		<p class="questiontitle">Looking for an Italian restsurant for a customer dinner.</p>
    		<p class="questionbody">Anyone have any suggestions for an upscale Italian restaurant in the Santa Clara area? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et quam eget diam ullamcorper eget et ullamcorper id id orci. Don...<a href="#.html">moreĽ</a></p>
    		<div id="info"><span class="author">by <a href="#.html">Kelly Cartwright</a> 10 minutes ago </span></div>
    
          <div id="info"><ul id="editmenu" class="topmenu">
    			<li class="toplast"><a href="#"><img src="images/edit-icon.png" class="hidden-edit" width="13" height="16" border="0" /></a>
    				<ul>
    					<li><a href="#">Edit this post</a></li>
    					<li><a href="#">Delete this post</a></li>
    					<li><a href="#">Flag this Post</a></li>
    				</ul>
    			</li>
    		</ul></div>
            <div id="info" class="spacer"><img src="images/replyicon.png" width="46" height="13" class="hidden-reply" border="0" /></div>
          <div class="clear"></div>
            <div class="answertextboxbackground"><input name="" id="answertextbox" class="answertextbox" value="Be the first to answer..." type="text" /></div>
          </div>
    	<div class="clear"></div>
    </div>
    
    <div class="clear"></div>
    
    <div class="questionboxcontent"> 
    	<img src="images/userimage.png" width="50" height="50" class="image-level1" border="0" />
    	<div class="text-level1">
    		<p class="questiontitle">Looking for an Italian restsurant for a customer dinner.</p>
    		<p class="questionbody">Anyone have any suggestions for an upscale Italian restaurant in the Santa Clara area? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et quam eget diam ullamcorper eget et ullamcorper id id orci. Don...<a href="#.html">moreĽ</a></p>
    		<div id="info"><span class="author">by <a href="#.html">Kelly Cartwright</a> 10 minutes ago </span></div>
    
          <div id="info"><ul id="editmenu" class="topmenu">
    			<li class="toplast"><a href="#"><img src="images/edit-icon.png" class="hidden-edit" width="13" height="16"  /></a>
    				<ul>
    					<li><a href="#">Edit this post</a></li>
    					<li><a href="#">Delete this post</a></li>
    					<li><a href="#">Flag this Post</a></li>
    				</ul>
    			</li>
    		</ul></div>
          <div id="info" class="spacer"><img src="images/replyicon.png" width="46" height="13" class="hidden-reply" border="0" /></div>
          <div class="clear"></div>
          <div class="numberanswers"><a href="#.html">2 Answers <img src="images/down.png" width="7" height="7" border="0" /></a></div>
          <div class="clear"></div>
            <div class="answertextboxbackground"><input name="" id="answertextbox" class="answertextbox" value="Answer the question..." type="text" /></div>
        </div>
    	<div class="clear"></div>
    </div>
    
    <div class="clear"></div>
    
    <div class="questionboxcontent"> 
    	<img src="images/userimage.png" width="50" height="50" class="image-level1" border="0" />   
    	<div class="text-level1">
    		<p class="questiontitle">Looking for an Italian restsurant for a customer dinner.</p>
    		<p class="questionbody">Anyone have any suggestions for an upscale Italian restaurant in the Santa Clara area? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et quam eget diam ullamcorper eget et ullamcorper id id orci. Don...<a href="#.html">moreĽ</a></p>
    		<div id="info"><span class="author">by <a href="#.html">Kelly Cartwright</a> 10 minutes ago </span></div><!--- info closed--->
    		<div id="info">
              	<ul id="editmenu" class="topmenu">
              		<li class="toplast"><a href="#"><img src="images/edit-icon.png" class="hidden-edit" width="13" height="16" border="0" /></a>
    					<ul>
    						<li><a href="#">Edit this post</a></li>
    						<li><a href="#">Delete this post</a></li>
    						<li><a href="#">Flag this Post</a></li>
    					</ul>
    				</li>
              	</ul>
    		</div><!---info closed--->
    		<div id="info" class="spacer"><img src="images/replyicon.png" width="46" height="13" class="hidden-reply" border="0" /></div><!---info closed--->
    		<div class="clear"></div>
    		<div class="numberanswers"><a href="#.html">Hide Answers <img src="images/arrowup.png" width="7" height="7" border="0" /></a></div>
    	</div><!---text-level1 closed--->
    
    	<div class="clear"></div>
    
    	<div class="answerboxcontent"> 
    		<img src="images/userimage.png" width="35" height="35" class="image-level2" border="0"/>
    		<div class="text-level2">
    			<p class="answerbody">Anyone have any suggestions for an upscale Italian restaurant in the Santa Clara area? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et quam eget diam ullamcorper eget et ullamcorper id id orci. Don quam eget quam eget quam eget diam ullamcorper eget diam ullamcorper egetdiam ullamcorpdus...<a href="#.html">moreĽ</a></p>
    			<div id="info"><span class="author">by <a href="#.html">Kelly Cartwright</a> 10 minutes ago </span></div>
    			<div id="info">
                	<ul id="editmenu" class="topmenu">
    					<li class="toplast"><a href="#"><img src="images/edit-icon.png" class="hidden-edit" width="13" height="16" border="0" ></a>
    						<ul>
    							<li><a href="#">Edit this post</a></li>
    							<li><a href="#">Delete this post</a></li>
    							<li><a href="#">Flag this Post</a></li>
    						</ul>
    					</li>
    				</ul>
    			</div>
    			<div id="info" class="spacer"><img src="images/replyicon.png" width="46" height="13" class="hidden-reply" border="0" /></div>
    			<div class="clear"></div>
    			<div class="numbercomments"><a href="#.html">Hide Comments <img src="images/arrowup.png" width="7" height="7" border="0" /></a></div>
    			<div class="clear"></div>
    			<div class="answertextboxbackground"><input name="" id="commenttextbox" class="answertextbox" value="Comment on the answer.." type="text" /></div>
    		</div><!--- text-level2 closed--->
            
            <div class="clear"></div>
           
          	<div class="commentboxcontent"> 
    			<img src="images/userimage.png" width="35" height="35" class="image-level3" border="0" />
    			<div class="text-level3">
    				<p class="commentbody">Anyone have any suggestions for an upscale Italian restaurant in the Santa Clara area? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et quam eget diam ullamcorper quam eget diam ullamcorper eget quam eget diam ullamcorper eget quam eget et ullamcorper id id or...<a href="#.html">moreĽ</a></p>
    				<div id="info"><span class="author">by <a href="#.html">Kelly Cartwright</a> 10 minutes ago </span></div>
    				<div id="info">
    					<ul id="editmenu" class="topmenu">
    						<li class="toplast"><a href="#"><img src="images/edit-icon.png" class="hidden-edit" width="13" height="16" border="0" /></a>
    							<ul>
    								<li><a href="#">Edit this post</a></li>
    								<li><a href="#">Delete this post</a></li>
    								<li><a href="#">Flag this Post</a></li>
    							</ul>
    						</li>
    					</ul>
    				</div>
    				<div id="info" class="spacer"><img src="images/replyicon.png" width="46" height="13" class="hidden-reply" border="0" /></div>
    			</div><!--- text-level3 closed--->
    			<div class="clear"></div>
    		</div><!--- commentboxcontent closed --->
        </div><!--- answerboxcontent closed--->
     
    	<div class="text-level1">
    		<div class="answertextboxbackground"><input name="" id="answertextbox" class="answertextbox" value="Answer the question..." type="text" /></div>
    	</div>
    	<div class="clear"></div>
    </div><!---questionboxcontent closed--->
    
    	<p align="center">More</p>	
    </div><!---contenbox xlosed--->
    
    <div class="clear"></div>
    
    
    </body>
    </html>
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    /*    ................................................................................GLOBAL SETTINGS   */
    /*    ................................................................................Page Properties    */
    
    body{
    	font-family:Arial, Helvetica, sans-serif;
    	background-image:url(images/bg.png);
    	background-repeat:repeat;
    	margin:0px;}
    .clear{
    	clear:both;}
    a {
    	color:#3366cc;
    	text-decoration:none;}
    
    
    /*    ................................................................................Navigation Properties   */
    .navigation{/* navigation pane */
    	background-image:url(images/nav-bg.png);
    	background-repeat:repeat;
    	height:60px;
    	width:100%;
        position:fixed;}
    .navmodule{/* content box for navigation */
    	width:836px;
    	margin-left:auto;
    	margin-right:auto;}
    .logo{/* logo div */
    	background-image:url(images/logo.png);
    	width:163px;
    	height:60px;
    	float:left;}
    .navmenu{/* container for navigation buttons */
    	float:right;
    	margin-top:15px;}
    .navmenu img{/* spacing for nav images */
    	margin-left:15px;}
    .new{/* notification text */
    	color:#FFF;
    	font-size:11px;
    	font-weight:bold;
    	position:relative;
    	top:-18px;
    	margin-right:0px;}
    .notify{/*correcting margins of notification icon*/
    	margin-right:-15px;}
    .username{/*users name*/
    	color:#333;
    	font-size:16pt;
    	margin-left:5px;
    	vertical-align:inherit;
    	vertical-align:super;
    	padding-top:10px;
    	text-shadow: 2px 2px 2px #615d61;
        filter: dropshadow(color=#615d61, offx=2, offy=2);}
    
    /*     ................................................................................PAGE PROPERTIES     */
    /*     ................................................................................Homepage Properties     */
    .activehome{/*carrot for the homepage*/
    	margin-top:3px;
    	margin-left:558px;}
    
    /*     ................................................................................askbox properties */
    .askbox{/*container for the ask section */
    	border-radius: 5px; 
    	-moz-border-radius: 5px; 
    	-webkit-border-radius: 5px; 
    	border: 1px solid #BBBBBB;
    	background-color:#e6e4e2;
    	width:796px;
    	height:45px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:20px;
    	padding:20px;}
    #ask{
     	border-radius: 5px;
      	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px; 
        border:solid 1px #c1bfbe;
        padding:5px;/*ask textbox */
    	height:33px;
    	width:450px;
    	float:left;}
    #ask:focus { /*blue outline and text changes when clicked*/
    	border: 2px solid #8ea3df; 
    	outline:none;
    	float:left;
    	margin-right:-2px;
    	font-size:12px;
    	color:#333;}
    .ask{/*default textbox text style */
    	font-size:20px;
    	color:#acb0bd;
    	padding-left:10px;}
    .from{/*from text style*/
    	font-size:20px;
    	color:#333;
    	line-height:50px;
    	margin-right:10px;
    	margin-left:15px;
    	float:left;}
    /*     ................................................................................location properties */
    .locationcssmenu{
    	float:right;}
    /* Top level UL */
    ul#location{
    	position:relative;
    	display:inline-block;
    	*display:inline;}
    ul#location,ul#location ul{
    	margin:0;
    	padding:0;
    	background-color:#dedede;
    	border-width:1px;
    	border-style:solid;
    	border-color:#c4c6cd;
    	list-style:none;
    	-moz-border-radius:5px;
    	-webkit-border-radius:5px;
    	border-radius:5px;}
    ul#location img{
    	border:none;
    	vertical-align:middle;
    	margin-left:10px;}
    ul#location span{
    	display:block;
    	overflow:visible;
    	padding-right:0px;}
    ul#location a{
    	display:block;
    	vertical-align:middle;
    	text-align:left;
    	text-decoration:none;
    	font:20px Arial,Helvetica,sans-serif;
    	color:#333;
    	padding:10px;
    	width:240px;
    	background-image:url(images/button-bg.png);
    	background-repeat:repeat;
    	background-position:0 0;
    	border-width:0px;
    	border-style:solid;
    	border-color:#C0C0C0;}
    /* Top Level LI */
    ul#location li{
    	position:relative;
    	display:block;
    	white-space:nowrap;
    	float:left;}
    * html ul#location li a{
    	display:inline-block;}
    ul#location li:hover>*{
    	display:block;}
    ul#location li:hover{
    	z-index:1;}
    ul#location li:hover>a,ul#location li a.pressed{
    	background-color:#dddbd9;
    	border-color:#C0C0C0;
    	border-style:solid;
    	color:#333333;
    	text-shadow:#FFF 0 0 1px;
    	background-image:url("mainbk.png");
    	text-decoration:none;}
    ul#location li.toplast>a{
    	border-radius:0 5px 5px 0;
    	-moz-border-radius:0 5px 5px 0;
    	-webkit-border-radius:0;
    	-webkit-border-top-right-radius:5px;
    	-webkit-border-bottom-right-radius:5px;}
    /* Drop down UL */	
    ul#location ul{
    	display:none;
    	position:absolute;
    	width:260px;
    	background-color:#FFFFFF;
    	border: 1px solid #c4c6cd;
    	border-radius:5px;
    	-moz-border-radius:5px;
    	-webkit-border-radius:5px;}
    ul#location ul a{
    	text-align:left;
    	padding:4px;
    	background-image:none;
    	padding-left:10px;
    	font:14px Arial,Helvetica,sans-serifa;
    	line-height:21px;
    	color:#666;
    	text-decoration:none;}
    /* Drop Down LI */
    ul#location ul li{
    	float:none;
    	margin:0px;
    	border-bottom:1px solid #dddddd;}
    ul#location ul li:hover>a,ul#location ul li a.pressed{
    	background-color:#f4f4f4;
    	background-image:none;
    	width:245px;
    	color:#666;
    	text-decoration:none;}
    /*     ................................................................................content properties*/
    .contentbox{/*content container*/
    	border-radius: 5px; 
    	-moz-border-radius: 5px; 
    	-webkit-border-radius: 5px; 
    	border: 1px solid #BBBBBB;
    	background-color:#FFF;
    	width:836px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:20px;
    	margin-bottom:30px;}
    .header{
    	margin-top:20px;
    	margin-left:20px;
    	font-size:24px;
    	color:#333;
    	font-weight:bold;
    	margin-bottom:20px;}
    	
    /*     ................................................................................menu styles*/
    .menu1home{
    	width:233px;
    	height:30px;
    	padding-top:10px;
    	text-align:center;
    	background-color:#e6e4e2;
    	border-top: 1px solid #acb0bd;
    	border-bottom: 1px solid #acb0bd;
    	border-right: 1px solid #acb0bd;
    	float: left;}
    .menu2home{
    	width:185px;
    	height:30px;
    	padding-top:10px;
    	text-align:center;
    	border-top: 1px solid #c3c5cc;
    	border-bottom: 1px solid #c3c5cc;
    	border-right: 1px solid #c3c5cc;
    	background-color:#e6e4e2;
    	float:left;}
    .menu3home{
    	width:185px;
    	height:30px;
    	padding-top:10px;
    	text-align:center;
    	border-top: 1px solid #c3c5cc;
    	border-bottom: 1px solid #c3c5cc;
    	border-right: 1px solid #c3c5cc;
    	background-color:#e6e4e2;
    	float:left;}
    .menu4home{
    	width:230px;
    	height:30px;
    	padding-top:10px;
    	text-align:center;
    	border-top: 1px solid #c3c5cc;
    	border-bottom: 1px solid #c3c5cc;
    	background-color:#e6e4e2;
    	float:left;}
    .menulink{
    	text-align:center;}
    		
    /*     ................................................................................question box styles*/
    .questionboxcontent{/*question container*/
    	background-color:#fff;
    	border-bottom:1px solid #e5e8f0;}
    .questionboxcontent:hover{/*background color change*/
    	background-color:#f4f4f4;}
    .questionboxcontent:hover a{/*link color change*/
    	color:#3366cc;}
    .image-level1{/*user image*/
    	margin-left:20px;
    	margin-top:20px;
    	width:50px;
    	height:50px;
    	float:left;}
    .text-level1{/*text container*/
    	margin-right:20px;
    	width:731px;
    	float:right;}
    .questiontitle{/*question title style*/
    	font-size:16px;
    	font-weight:bold;
    	margin-top:20px;
    	margin-bottom:0px;}
    .questionbody{/*question body style*/
    	margin-top:5px;
    	margin-bottom:0px;
    	font-size:14px;
    	color:#666;}
    .questionbody a{/*link style for body*/
    	text-decoration:none;
    	color:#999999;
    	font-weight:bold;}
    .questionbody a:hover{/*hover link change*/
    	color:#3366cc;}
    .author{/*question author style*/
    	margin-top:5px;
    	font-size:12px;
    	color:#999;
    	float:left;
    	position:relative;}
    .author a{/*author link style*/
    	text-decoration:none;
    	color:#999999;
    	font-weight:bold;}
    .answers{/*# of answers style*/
    	font-size:12px;
    	color:#333;}
    .answers a{/*answers link style*/
    	text-decoration:none;
    	color:#333;
    	font-weight:bold;}
    #info{
    	float:left;}
    /*     ................................................................................edit menu styles*/
    .hidden-edit {/*hidden edit icon*/
    	display:none; 
    	margin-left:10px;
    	margin-top:-20px;}
    ul#editmenu,ul#editmenu ul{
    	margin-top:20px;
    	list-style:none;
    	padding:0;}
    ul#editmenu ul{/* drop down menu */
    	display:none;
    	position:absolute;
    	width:100px;
    	margin-top:3px;
    	background-color:#fff;
    	margin-left:10px;
    	border: 1px solid #999;
    	padding:0 10px 10px;}
    ul#editmenu li:hover>*{
    	display:block;}
    ul#editmenu li{
    	display:block;
    	float:left;}
    ul#editmenu{
    	position:relative;
    	display:inline-block;}
    ul#editmenu ul li{
    	float:none;
    	padding-top:5px;}
    ul#editmenu ul a{
    	text-align:left;
    	font:12px Arial, Helvetica, sans-serif;
    	line-height:14px;
    	color:#999;
    	text-decoration:none;}
    .hidden-reply{
    	display:none;
    	float:left;
    	position:relative;
    	font-size:12px;
    	margin-left:20px;}
    .spacer{
    	margin-left:10px;
    	margin-top:8px;
    	position:relative;}
    /*     ................................................................................number of X styles*/	
    .numberanswers{
    	color:#333;
    	font-size:12px;
    	font-weight:bold;
    	margin-top:-10px;
    	margin-bottom:15px;
    	position:relative;}
    .numberanswers a{
    	color:#333;}
    .numbercomments{
    	color:#333;
    	font-size:12px;
    	font-weight:bold;
    	margin-top:-10px;
    	margin-bottom:12px;
    	position:relative;}
    .numbercomments a{
    		color:#333;}
    
    /*     ................................................................................question box styles*/	
    .questionboxcontent:hover .hidden-edit,  .questionboxcontent:hover .hidden-reply{/*show icon on hover*/
    	display:block;
    	position:absolute;}
    /*   question text boxes   */	
    .answertextboxbackground{/* answerbox softening background */
    	border-radius: 5px; 
    	-moz-border-radius: 5px; 
    	-webkit-border-radius: 5px; 
    	padding:10px;
    	background-color:#f4f4f4;
    	margin-bottom:20px;}
    .questionboxcontent:hover .answertextboxbackground{/* mouseover background change */
    	background-color:#ebebeb;}
    #answertextbox{/* textbox */
    	border-radius: 5px; 
    	-moz-border-radius: 5px; 
    	-webkit-border-radius: 5px; 
        border:solid 1px #c1bfbe;
        padding:5px;
    	height:20px;
    	width:695px;}
    #answertextbox:focus { /* textbox blue and text change onclick */
    	border: 2px solid #8ea3df; 
    	outline:none;
    	font-size:12px;
    	color:#333;
    	margin-top:-1px;
    	margin-bottom:-1px;}
    #commenttextbox{/* textbox */
    	border-radius: 5px; 
    	-moz-border-radius: 5px; 
    	-webkit-border-radius: 5px; 
        border:solid 1px #c1bfbe;
        padding:5px;
    	height:20px;
    	width:645px;}
    #commenttextbox:focus { /* textbox blue and text change onclick */
    	border: 2px solid #8ea3df; 
    	outline:none;
    	font-size:12px;
    	color:#333;
    	margin-top:-1px;
    	margin-bottom:-1px;}
    .answertextbox{/* default textbox text style */
    	font-size:14px;
    	color:#acb0bd;
    	padding-left:10px;}
    /*     ................................................................................answer content properties*/
    .answerboxcontainer{
    	width:730px;
    	float:right;}
    .image-level2{/*user image*/
    	width:35px;
    	height:35px;
    	margin-left:86px;
    	margin-top:-3px;
    	float:left;}
    .text-level2{/*test container*/
    	margin-top:-11px;
    	width: 680px;
    	float:right;
    	margin-right:20px;}
    .answerbody{/*question body style*/
    	margin-top:5px;
    	margin-bottom:0px;
    	font-size:14px;
    	color:#666;}
    .answerbody a{/*link style for body*/
    	text-decoration:none;
    	color:#999999;
    	font-weight:bold;}
    .answerbody a:hover{/*hover link change*/
    	color:#3366cc;}
    /*     ................................................................................comment content properties*/
    .commentboxcontainer{
    	width:730px;
    	float:right;}
    .image-level3{/*user image*/
    	width:35px;
    	height:35px;
    	margin-left:136px;
    	float:left;
    	margin-top:-5px;}
    .text-level3{/*test container*/
    	margin-top:-15px;
    	margin-right:20px;
    	width: 629px;
    	float:right;}
    .commentbody{/*question body style*/
    	margin-top:5px;
    	margin-bottom:0px;
    	font-size:14px;
    	color:#666;}
    .commentbody a{/*link style for body*/
    	text-decoration:none;
    	color:#999999;
    	font-weight:bold;}
    .commentbody a:hover{/*hover link change*/
    	color:#3366cc;}
    	
    /*     ................................................................................BROWSER HACKS     */
    @media screen and (-webkit-min-device-pixel-ratio:0)
    {
    .hidden-edit {margin-top:-14px;}
    }
    @-moz-document url-prefix() {
    	.hidden-edit{margin-top:-15px;}
    }
    @-moz-document url-prefix() {
    	.numberanswers{position:relative;}
    }
    @-moz-document url-prefix() {
    	.image-level2{margin-top:16px}
    }
    @-moz-document url-prefix() {
    	.answertextboxbackground{margin-top:0px}
    }
    @-moz-document url-prefix() {
    	.text-level2{margin-top:8px}
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    I realize your upset, but welcome to DevShed Forums, anyway.

    I remember a thread with a similar title recently, but yes, it seems to be missing. I didn't delete it, but maybe one of the other moderators (or administrators) did.

    Anyway, the problem is that ".navigation" and "ul#location li" are "positioned" and positioned elements that come later in the document will get stacked on top of those that come before (if they overlap), unless you override that with the z-index property.

    Are you aware that your page contains errors? The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0
    What should I set my z-indexes as?
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    You only need to set one. Give the fixed positioned element a z-index that's fairly high but not extremely high, like 4000.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0
    Thank you SOO much. Life saver! (And I'll make sure to validate!)

IMN logo majestic logo threadwatch logo seochat tools logo