SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Location
    GC, Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Child Div partially obscured

    I have a site which was previously in tables, and I am redoing with CSS. I have 4 Div elements to hold everything:

    #wrap, #header, #topnav, #main(children #sidenav & #content)

    I got down to #content and wasn't sure how to position it, so the top and bottom border doesn't show in FF. Oddly enough, it looks the way I want it to in IE. Any ideas why?

    url:http://www.geocities.com/bridgetshep/index.html

    css:http://www.geocities.com/bridgetshep/styles/style1.css

    tia!

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    clear the floats , see FAQ CSS
    http://www.sitepoint.com/forums/show...5&postcount=15

    the PIE way
    http://www.positioniseverything.net/easyclearing.html

    head+body #main:after{
    content: ".";
    display: block;
    height:0;
    clear: both;
    visibility: hidden;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Location
    GC, Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Okay,

    After reading the info at the suggested links, I did apply the ".clearfix" to #main. So now in FF the bgcolor shows at the bottom of #content, but not above it. IE still looks the way I want.

    http://www.geocities.com/bridgetshep/index.html

    I'm not real clear on exactly what floats are/do when it comes to positioning DIVs, so I will try to look up more info on that. Tried applying the ''.clearfix'' to #topnav as well, but saw no difference.

    Any other possible issue causing this??

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    you have to clear the float in your hor. nav. also , use floats

    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=iso-8859-1" />
    <title>New Site Coming Soon</title>
    	<style type="text/css">
    	*{margin:0;padding:0;}
    
    	body {
    	background:#ccc;	/*Set body margin, padding for consistency bet. browsers*/
    	padding: 0;
    	font-family: Geneva, Lucida, Arial, Helvetica, sans-serif;
    	margin: 15px 0 0 0;
    	vertical-align: top;
    	}
    	/*Wrap container -- parent to all div elements*/
    	#wrap {
    	width: 930px;
    	margin:0 auto;
    	}
    	
    	head+body #main:after,head+body #topnav:after,head+body #topnav ul:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    
    
    	/* HEADER graphic w/logo*/
    	#header {
    	background: url(images/test_header.gif) no-repeat center top;
    	height:100px;
    	}
    	
    	/* TOP NAVIGATION BAR */
    	#topnav{
    	width:100%;
    	background:#23282E;
    	font-size: 8px;
    	font-weight: bold;
    	white-space: nowrap;
    	letter-spacing: 1px;
    	}
    
    	#topnav ul{float:left;}
    
    	#topnav ul li{display:inline;}
    
    	#topnav ul li a{
    	color:#FFFFFF;
    	text-decoration:none;
    	padding:4px 24px 4px 24px;
    	float: left;
    	border-right: 1px #325155 solid;/*space bet. buttons*/
    	}
    
    	#topnav ul li a:hover{background-color:#7EBBC8;}
    
    	/*MAIN TABLE -- parent to #sidenav, #content*/
    	/*MAIN TABLE -- parent to #sidenav, #content*/
    	#main{
    	background:#D96109 url(../images/bg_burnt300.gif) center top repeat-x;
    	padding:8px 0 8px 0;
    	}
    	* html #main{height:1%;}
    
    	/* SIDE NAVIGATION BAR */
    	#sidenav{
    	float:left;
    	display:inline;
    	font-size: 10px;
    	font-weight:bold;
    	margin:30px 0 0 20px;
    	}
    
    	#sidenav ul{list-style-type:none;/*turns off bullets*/}
    
    	#sidenav ul li a{
    	width:140px;
    	padding:4px 0 4px 0;
    	background:#22323B;
    	color:#FFFFFF;
    	text-decoration:none;
    	text-align:center;
    	border:1px #000 solid;
    	border-top:none; 
    	display:block;/*makes entire area around link clickable */
    	}
    	
    	#sidenav ul li a:hover{color: #7EBBC8;}
    
    	/* CONTENT */
    	#content{
    	padding: 8px;	
    	background: #FFFFFF;	
    	font-size: 12px;
    	}
    	* html #content{float:right;display:inline;margin:0 10px 0 0;}
    	head+body #content{margin:0 10px 0 180px;}
    	/*End Main*/
    
    	
    	/* FOOTER */
    	#footer{
    	margin:8px auto;
    	line-height:40px;
    	color:#000;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	text-align:center;
    	clear:both;
    	}
    	
    	</style>
    </head>
    <body>
    <!-- following code added by server. PLEASE REMOVE -->
    <!-- preceding code added by server. PLEASE REMOVE -->
    
    <!--WRAP DIV-->
    <div id="wrap">
    
    
    <!-- HEADER Div-->
    <div id="header"></div>
    
    
    <!-- Navbar Div-->
    <div id="topnav">
      <ul>
       <li><a href="index.html">HOME</a></li>
       <li><a href="index.html">NEWS</a></li>
       <li><a href="index.html">TEAM</a></li>
       <li><a href="index.html">SERVICES</a></li>
       <li><a href="index.html">MULTIMEDIA</a></li>
       <li><a href="index.html">TESTIMONIALS</a></li>
       <li><a href="index.html">RESOURCES</a></li>
       <li><a href="index.html">STORE</a></li>
       <li><a href="index.html">CONTACT</a></li>
      </ul></div>
    
    
    <!-- MAIN TABLE INCLUDING SIDE NAVIGATION & CONTENT -->
    <div id="main">
    
      <div id="sidenav">
        <ul><li><a href="index.html">Item 1</a></li>
            <li><a href="index.html">Item 2</a></li>
            <li><a href="index.html">Item 3</a></li>
            <li><a href="index.html">Item 4</a></li>
            <li><a href="index.html">Item 5</a></li>
            <li><a href="index.html">Item 6</a></li>
            <li><a href="index.html">Item 7</a></li>
            <li><a href="index.html">Item 8</a></li>
            <li><a href="index.html">Item 9</a></li>
        </ul>
    	</div>
    
      <div id="content"><p>TESTIMONIALS</p>
          <p>Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here.</p>
          <p>Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
             Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
          </p></div>
    	  
    </div>
         
    
    <!-- FOOTER INFORMATION -->
    <div id="footer">&copy;2006 My sitename.&nbsp; All Rights Reserved.</div>
    
    </div>
    
    </body>
    </html>
    Last edited by all4nerds; Feb 27, 2006 at 07:36.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Because your nav is floated then the top margin of #content will ignore the floated content and look at the margin of its parent instead.

    You have also set the nav to have a 10px height and therefore firefox will treat it as 10px.

    Set the correct height on the nav and then add a border to #main to stop the margins collapsing.

    Code:
    #main{
     position: relative;   /*flows under topnav, but can't see bgcolor in #content*/
     width: 930px;
     margin: auto;
     background-image: url(../images/bg_burnt300.gif);
     background-position: center top;
     background-repeat: repeat-x;
     background-color: #D96109;  /*Tile vertically under img -- can't see in FF*/
    border:1px solid #000
    }
     
     
    #topnav{
    		position: relative;   /*flow directly under header*/
     width : 930px;
     height:18px;
    etc.......................
    
    
    

    Floats are removed from the floaw and will push foreground content out of the way. Background content such as borders, background colours on static elements will act as if the float wasn't there.

    You either have to put margins on the floats themmselves or completely clear the floats with a clearing div before margins will takke affect.

    Mozilla will also collapse adjacent vertical margins on static content unless the element has a border or some padding to stop the collapse.
    http://complexspiral.com/publication...psing-margins/

    Hope it helps

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Location
    GC, Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys for the help! I have a bit of practicing to do before I understand fully how to use "float/clear" with my DIV containers to position page layout properly. Happily, your coding suggestions made everything just the way I want it ... for now


Bookmarks

Posting Permissions

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