Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lower DIV overlapping top DIV.

    Hello, I have a problem that's driving me nuts. I have a lower div that seems to overlap the top div, but I can get it down if I use the margin-top css command. However, it shouldn't have to use that should I as it should be below the top div.


    The lower div '"portfolio_landscape_slider_content' is going over the 'top_content' div.

    I've used html validation, but nothing comes up that would have influence on div positioning.

    CSS:

    Code:
    @charset "utf-8";
    /* Start Misc*/
    * {margin: 0; padding: 0;}
    html, body {height: 100%;}
    #wrap {min-height: 100%; background-color: #f8f8f8; width: 100%} 
    p {
    	font-size: 12px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	color: #3D2C00;
    	line-height: 18px;
    	padding-top: 10px
    }
    h1 {
    	font-size: 18px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	color: #2E5E72;
    	margin-bottom: 10px;
    	font-weight: bold;
    }
    h2 {
    	font-size: 16px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #3184B6;
    }
    .clear {clear:both}
    ul {list-style: none}
    /* End Misc-------------------------------------------------------------------------------------------------------- */
    /*Header Content*/
    #header_container {width: 100%; background-color: #333333; height: 51px; background-image: url(../images/header_bg.jpg) ; background-repeat:repeat-x;}
    img.header_image {width: 285px;  height: 41px; display: block; margin-left: auto; margin-right: auto;}
    /*End Header Content*/
    #central {overflow: hidden; width: 100%; height: 364px; background-color: #66CCFF; background-image:url(../images/central_bg.jpg); background-repeat:repeat-x}
    img.central_image {width: 503px;  height: 343px; display: block; margin-left: auto; margin-right: auto;}
    /*Start Main Nav*/
    #nav_container {width: 100%; height: 35px; background-color: #0066FF; background-image:url(../images/main_nav_bg.jpg); background-repeat:repeat-x;}
    #prinav {background: url(../images/main_nav_buttons.jpg);height: 35px; width: 520px; margin: 0 auto; position: relative;}
    #prinav li {list-style-type: none; float: left;}
    #prinav a {height: 35px; display: block;}
    #home {width: 130px; }
    #biography {width: 130px;}
    #portfolio {width: 130px;}
    #contact {width: 130px;}
    #home a:hover {background: url(../images/main_nav_buttons.jpg) 0px -35px no-repeat;}
    #biography a:hover {background: url(../images/main_nav_buttons.jpg) -130px -35px no-repeat;}
    #portfolio a:hover {background: url(../images/main_nav_buttons.jpg) -260px -35px no-repeat;}
    #contact a:hover {background: url(../images/main_nav_buttons.jpg) -390px -35px no-repeat;}
    .home #prinav li#home a {background: url(../images/main_nav_buttons.jpg) 0px -70px no-repeat;}
    .biography #prinav li#biography a {background: url(../images/main_nav_buttons.jpg) -130px -70px no-repeat;}
    .portfolio #prinav li#portfolio a {background: url(../images/main_nav_buttons.jpg) -260px -70px no-repeat;}
    .contact #prinav li#contact a {background: url(../images/main_nav_buttons.jpg) -390px -70px no-repeat;}
    /*End Main Nav*/
    /*Start Sec Nav*/
    #sec_nav {width: 100%; height: 24px; background-color: #333333; background-image:url(../images/sec_nav_bg.jpg); background-repeat:repeat-x; padding-top: 9px;} 
    #sec_nav ul {margin: 0 auto; width: 700px; text-align: center; height: 27px; background-color: transparent;}
    #sec_nav li {display:inline; padding-right: 20px; font-size:12px; font-family: Sans-serif, Arial, Verdana, Helvetica; font-weight: normal; font-weight:bold}
    #sec_nav li a {text-decoration: none; color: white;}
    #sec_nav li a:visited {color: grey;}
    #sec_nav li a:hover {color: white; text-decoration:underline;}
    #sec_nav li a:active {color: yellow;}
    #sec_nav li a.selected {color: #0099FF}
    /*End Sec Nav*/
    #bar {height: 10px; background-color:#333333; background-image:url(../images/bar.jpg); background-repeat:repeat-x}
    /*Start Main*/
    #main {
    	overflow: auto;
    	margin: 0 auto;
    	width: 860px;
    	padding-bottom: 279px;	
    	clear: both;
    	padding-top: 50px;
    }
    /*End Main*/
    /*Top Content Box*/
    #top_content {
    	background-color: #FFFFFF;
    	border:solid;
    	border-color: #E8E8E8;
    	border-width: 1px;
    	border-style:solid;
    	height: auto;
    	width: 828px;
    	float: left;
    	padding: 15px;
    	margin-left 3px;
    	-moz-border-radius-bottomright: 8px;
    	border-bottom-right-radius: 8px;
    	-moz-border-radius-bottomleft: 8px;
    	border-bottom-left-radius: 8px;
    	-moz-border-radius-topright: 15px;
    	border-top-right-radius: 15px;
    	-moz-border-radius-topleft: 15px;
    	border-top-left-radius: 15px;	
    }
    /*End Top content box*/
    /*Start Biography Content*/
    #equipment {
    	background-color: #FFFFFF;
    	border:solid;
    	border-color: #E8E8E8;
    	border-width: 1px;
    	border-style:solid;
    	height: auto;
    	width: 820px;
    	float: left;
    	padding: 15px;
    	margin: left 3px;
    	-moz-border-radius-bottomright: 8px;
    	border-bottom-right-radius: 8px;
    	-moz-border-radius-bottomleft: 8px;
    	border-bottom-left-radius: 8px;
    	-moz-border-radius-topright: 15px;
    	border-top-right-radius: 15px;
    	-moz-border-radius-topleft: 15px;
    	border-top-left-radius: 15px;
    	margin-top: 50px;
    	clear: both;	
    }
    #equipment li{
    	color:#3D2C00;
    	font-size:12px;
    	padding: 10px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    /*End Biography Content*/
    /*Portfolio index Content*/
    #portfolio_blocks {
     	margin-top: 150px
    }
    #portfolio_blocks li {
    	list-style: none;
    	display: block;
    	float: left;
    	width: 398px;
    	height: 240px;
    	padding: 10px;
    	margin-right: 5px;
    	margin-left: 5px;
    	margin-bottom: 10px;
    	border:solid;
    	border-color: #E8E8E8;
    	border-width: 1px;
    	background-color: white;
    	-moz-border-radius-bottomright: 8px;
    	border-bottom-right-radius: 8px;
    	-moz-border-radius-bottomleft: 8px;
    	border-bottom-left-radius: 8px;
    	-moz-border-radius-topright: 15px;
    	border-top-right-radius: 15px;
    	-moz-border-radius-topleft: 15px;
    	border-top-left-radius: 15px;	
    }
    #portfolio_blocks img {border:solid; border-color:#CCCCCC; border-width: 1px; height: 123; width: 252px; float: right; margin-left: 10px;; margin-bottom: 10px}
    .portfolio_button {color:red; height: 45px; margin-top: 5px;}
    #portfolio_landscape_slider_content{margin: 0 auto; width: 828px; background-color:#FFFFFF; border:solid; padding: 5px;
    	border-color: #E8E8E8;
    	border-width: 1px;
    	background-color: white;
    	-moz-border-radius-bottomright: 8px;
    	border-bottom-right-radius: 8px;
    	-moz-border-radius-bottomleft: 8px;
    	border-bottom-left-radius: 8px;
    	-moz-border-radius-topright: 15px;
    	border-top-right-radius: 15px;
    	-moz-border-radius-topleft: 15px;
    	border-top-left-radius: 15px;}
    /*End Portfolio index Content*/
    /*Start Contact Content*/
    /*End Contact Content*/
    /*Footer Content*/
    #footer_container{
    	position: relative;
    	margin-top: -279px;
    	width: 100%;
    	height: 279px;
    	background-color: #3399CC;
    	background-image: url(../images/footer_wave.jpg);
    	background-repeat:repeat-x
    	clear: both;
    }
    #footer {
    	margin: 0 auto;
    	width: 400px;
    	height: 99px;
    	padding-top: 180px;
    	
    }
    #footer p {
    	color: white;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:10px;
    	text-align:center;
    }
    /* End Footer Content*/
    /*Opera Fix*/
    body:before {content:""; height:100%; float:left; width:0; margin-top:-32767px;}
    /*End Opera Fix*/

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jp - Biography</title>
    <link rel="stylesheet" href="/css/nivo-slider.css" type="text/css" media="screen" />
    <link href="/css/master.css" rel="stylesheet" type="text/css" />
    <link type="text/css" href="/css/styles.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="/scripts/jquery.nivo.slider.js" type="text/javascript"></script>
    <script type="text/javascript" src="/assets/js/jquery.pikachoose.js"></script>
    		<script language="javascript">
    			<!--
    			$(document).ready(function (){
    					$("#pikame").PikaChoose();
    				});
    				
    			-->
    		</script>
    
    <!--[if !IE 7]>
    
    	<style type="text/css">
    
    		#wrap {display:table;height:100%}
    
    	</style>
    
    <![endif]-->
    </head>
    <body>
    <div id="wrap">
    	<div id="header_container">
        	<img class="header_image" src="/images/header.jpg" alt="logo"/>
        </div>
      			<div id="central">
                	<div id="slider_wrapper" >
        				<div id="slider" class="nivoSlider">
        					<img src="/images/slide1.jpg" alt=""/>
    
        					<img src="/images/slide2.jpg" alt=""/>
        					<img src="/images/slide3.jpg" alt=""/>
        				</div>
                	</div>
    			</div>
    <div id="nav_container" class="portfolio">
    		<ul id="prinav">
    			<li id="home"><a href="/"></a></li>
    			<li id="biography"><a href="/biography"></a></li>
    
    			<li id="portfolio"><a href="/portfolio"></a></li>
    			<li id="contact"><a href="/contact"></a></li>
    		</ul>
      	</div>
      	<div id="sec_nav">
        	<ul>
    			<li><a href="/portfolio" class="selected">Landscapes</a></li> 
    		  <li><a href="/portfolio/architecture">Architecture</a></li>	          		
    	  </ul>
    
      	</div>
    	<div id="main">
          <div id="top_content">
            <h1> My Landscape Portfolio</h1>
    		 <p>This is my landscape portfolio, and I hope you enjoy it. I love taking landscape photos and framing my creative vision on the subject. I have 		traveled all over the UK, and I enjoy this. I am experienced in all the locations in the UK from Cornwal, Lake District and all the way up to scotland. Please find below some examples of my landscape photography.</p>
          </div>
          <div id="portfolio_landscape_slider_content">
    
          <div class="pikachoose">
    	<ul id="pikame">
    		<li><img src="/images/portfolio/landscapes/port_land_1.jpg"/><span>Thanks</span></li>
    		<li><img src="/images/portfolio/landscapes/port_land_2.jpg"/><span>jCarousel</span></li>		
    	</ul>
    	</div> 
        </div>    
          <div class="clear"></div>   
      </div>
    </div>
    
    <div id="footer_container">
    	<div id="footer">
        <p>Website designed and developed. <br> All rights reserved and copyright 2011</p>
       	</div>
    </div>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
    </body>
    </html>
    Last edited by jpw1984; 02-14-2011 at 11:30 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jpw1984,
    In FF4 #portfolio_landscape_slider_content slide up only a few pixels. Is that what you're seeing?
    Stop it from doing that by not floating full width #top_content. We use float to put things beside each other and, being full width, there is no room for anything next to #top_content.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah. Brilliant. Thank you. Not to sure why I had floats there, but that is now sorted. Thanks for your help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •