SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    *munch munch* killerkooki's Avatar
    Join Date
    Sep 2004
    Location
    Singapore
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems getting DIVs to show right...

    Hi,

    I am having some problem getting some of the DIVs to show up right.
    It behaves as intended in IE and Opera but not so in NS, Mozilla and FF.

    I need the topContainerBottom div to contain the title, the main navigation, bread crumbs and the user status, so that the border around the div contains all of them.
    Likewise, I need the midContainer div to contain the sub navigation and the content area.

    Another problem I've noticed is that in the main navigation bar, the left and right borders are missing. Again this is for NS, Mozilla and FF. The main navigation ul uses top and bottom borders but omits the side borders. However, shouldn't the borders from the div still show up?
    If I add side borders to the ul, it looks fine in the above three browsers, but then IE would show both borders.

    If it helps, the main navigation uses Suckerfish Drop Downs and the sub navigation uses Drop Down found from A List Apart.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    
    <head>
    <title>EMS: CSC - Home</title>
    
    <style type="text/css">
    
    body {
    	font: 62.5%/1.5 Verdana;
    	background: white url(bg.gif);
    	text-align: center;
    	padding: 0;
    	margin: 2em;
    }
    
    #topContainerTop
    {
    width: 96em;
    margin: 0 auto;
    }
    
    #productAndCompany
    {
    float: left;
    font-size: 1.1em;
    font-weight: bold;
    padding: 0;
    margin: 0;
    }
    
    #timeAndDate
    {
    float: right;
    font-size: 1.1em;
    font-weight: bold;
    padding: 0;
    margin: 0;
    }
    
    #topContainerBottom {
    	clear: left;
    	width: 96em;
    	background: #F4ECD9;
    	text-align: left;
    	border: 1px solid #eda;
    	margin: 0 auto 1em auto;
    }
    #topContainerBottom #pageTitle
    {
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.2em 0 0.6em 1em;
    margin: 0;
    background-color: #FFFFFF;
    }
    
    #navigation, #navigation ul {
    	float: left;
    	width: 96em;
    	list-style: none;
    	line-height: 1;
    	background: #FFFFFF;
    	font-weight: bold;
    	padding: 0;
    	border: solid #eda;
    	border-width: 1px 0;
    	margin: 0 0 1em 0;
    	z-index:2;
    }
    
    #navigation a {
    	display: block;
    	width: 10em;/*10*/
    	w\idth: 10em;/*6*/
    	color: #7C6240;
    	text-decoration: none;
    	padding: 0.25em 2em;
    }
    
    #navigation li {
    	float: left;
    	padding: 0;
    	width: 14em;/*10*/
    }
    #navigation li li {
    	padding-right: 1em;
    	width: 14em/*13*/
    }
    
    #navigation li ul {
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 14.4em;/*14.4*/
    	w\idth: 14.8em;/*13.9*/
    	font-weight: normal;
    	border-width: 0.25em;
    	margin: 0;
    }
    
    #navigation li ul a {
    	width: 13em;/*13*/
    	w\idth: 10.8em;/*9*/
    }
    
    #navigation li:hover ul, #navigation li.sfhover ul
    {
    left: auto;
    }
    
    #navigation li:hover, #navigation li.sfhover
    {
    background: #eda;
    }
    
    #breadCrumbs
    {
    float: left;
    font-size: 1.1em;
    font-weight: normal;
    padding: 0;
    margin: 0 0 0 0.5em;
    }
    
    #userStatus
    {
    float: right;
    font-size: 1.1em;
    font-weight: normal;
    padding: 0;
    margin: 0 0.5em 0 0;
    }
    
    #midContainer
    {
    clear: left;
    background: #F4ECD9;
    border: 1px solid #000;
    padding: 0;
    margin: 0 auto;
    width: 96em;
    }
    
    #midContainerNavigation
    {
    float: left;
    z-index:1;
    border: 1px solid #000000;
    margin: 1em 0.5em 1em 0.5em;
    }
    
    #subNavigation
    {
    /*margin: 0 0.5em 1em 0.5em;*/
    margin: 0;
    padding: 0;
    list-style: none;
    width: 15em;
    border-bottom: 1px solid #eda;
    text-align: left;
    }
    
    #subNavigation ul
    {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 15em;
    border-bottom: 1px solid #eda;
    text-align: left;
    }
    
    #subNavigation li
    {
    position: relative;
    }
    	
    #subNavigation li ul
    {
    position: absolute;
    left: 15em;
    top: 0;
    display: none;
    }
    
    #subNavigation li a
    {
    display: block;
    text-decoration: none;
    color: #7C6240;
    background: #fff; /* IE6 Bug */
    padding: 5px;
    border: 1px solid #eda;
    border-bottom: 0;
    font-weight: bold;
    }
    #subNavigation li ul li a 
    {
    padding: 2px 5px;
    font-weight: normal;
    }
    
    /* Fix IE. Hide from IE Mac \*/
    * html #subNavigation li { float: left; height: 1%; }
    * html #subNavigation li a { height: 1%; }
    * html #subNavigation li ul li{ float: left; height: 1%; }
    * html #subNavigation li ul li a { height: 1%; }
    /* End */
    
    #subNavigation li a:hover
    {
    color: #7C6240;
    background: #eda;
    }
    		
    #subNavigation li:hover ul, #subNavigation li.over ul
    {
    display: block;
    }
    
    #midContainerContent
    {
    margin: 1em 0.5em 1em 0.5em;
    width: 76em;
    float: right;
    /*border-left: 1px dashed #7C6240;*/
    border: 1px solid #000000;
    padding: 1em;
    text-align: left;
    }
    
    #bottomContainer
    {
    clear: both;
    width: 96em;
    background: #F4ECD9;
    text-align: left;
    border: 1px solid #eda;
    margin: 1em auto 0 auto;
    }
    
    </style>
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
    	var sfEls = document.getElementById("navigation").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //Sub Nav
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("subNavigation");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace(" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;
    //--><!]]></script>
    
    
    </head>
    
    <body>
    
    <div id='topContainerTop'>
    	<p id='productAndCompany'>EMS: Computer Sciences Corporation</p>
    	<p id='timeAndDate'>12:59:59 am on Wednesday, 31st December, 2004 (GMT)</p>
    </div>
    
    <div id="topContainerBottom">
    	<h1 id='pageTitle'>Generic Page Title / Category Goes Here</h1>
    
    	<ul id="navigation">
    		<li id='navigationHome'><a href='#'>Home</a>
    			<ul>
    				<li><a href='#'>News Archive</a></li>
    				<li><a href='#'>Your Account</a></li>
    				<li><a href='#'>Forum</a></li>
    				<li><a href='#'>Miscellaneous</a></li>
    				<li><a href='#'>Site Map</a></li>
    				<li><a href='#'>Help</a></li>
    			</ul>
    		</li>
    		<li id='navigationHumanResource'><a href="#">Human Resource</a>
    			<ul>
    				<li><a href="#">Recruitment</a></li>
    				<li><a href="#">Personnel</a></li>
    			</ul>
    		</li>
    		<li id='navigationProjects'><a href="#">Projects</a>
    			<ul>
    				<li><a href="#">Clients</a></li>
    				<li><a href="#">Projects</a></li>
    				<li><a href="#">Assignments</a></li>
    			</ul>
    		</li>
    		<li id='navigationFinance'><a href="#">Finance</a>
    			<ul>
    				<li><a href="#">Payroll</a></li>
    				<li><a href="#">Project Costing</a></li>
    				<li><a href="#">Project Billing</a></li>
    			</ul>
    		</li>
    		<li id='navigationAdministration'><a href='#'>Administration</a>
    			<ul>
    				<li><a href='#'>Users</a></li>
    				<li><a href='#'>System</a></li>
    				<li><a href='#'>Locality</a></li>
    				<li><a href='#'>Priviledges</a></li>
    				<li><a href='#'>Log</a></li>
    			</ul>
    		</li>
    	</ul>
    
    	<p id='breadCrumbs'><a href='#'>Home</a> / <a href='#'>Your Account</a></p>
    	<p id='userStatus'>Logged in as Jayawi Sriyanjan Perera (Administrator) <a href='#'>[Logout]</a></p>
    </div>
    
    <div id="midContainer">
    
    	<div id='midContainerNavigation'>
    		<ul id="subNavigation"> 
    			<li><a href="#">Your Account</a></li> 
    			<li><a href="#">Profile</a> 
    				<ul> 
    					<li><a href="#">Avatar</a></li> 
    					<li><a href="#">Password</a></li> 
    					<li><a href="#">Preferences</a></li> 
    				</ul> 
    			</li>
    			<li><a href="#">Messages</a> 
    				<ul>
    					<li><a href="#">Compose</a></li>
    					<li><a href="#">Inbox</a></li> 
    					<li><a href="#">Outbox</a></li> 
    					<li><a href="#">Contacts</a></li> 
    				</ul> 
    			</li> 
    			<li><a href="#">To Do List</a> 
    				<ul> 
    					<li><a href="#">Projects</a></li> 
    					<li><a href="#">Assignments</a></li> 
    					<li><a href="#">Tasks</a></li> 
    				</ul> 
    			</li> 
    		</ul>
    	</div>
    
    	<div id='midContainerContent'>
    	content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content
    	</div>
    
    </div>
    
    <div id='bottomContainer'>
    The I own This Nonsense Nonsense
    </div>
    
    </body>
    
    </html>
    Thank you for your time.
    Any help is much appreciated.

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

    You just need to clear the float for mozilla. Flaots are removed from the flow and the parent won't automatically wrap around.

    See my FAQ on floats for more info

    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>
    <title>EMS: CSC - Home</title>
    <style type="text/css">
    body {
     font: 62.5%/1.5 Verdana;
     background: white url(bg.gif);
     text-align: center;
     padding: 0;
     margin: 2em;
    }
    #topContainerTop
    {
    width: 96em;
    margin: 0 auto;
    }
    #productAndCompany
    {
    float: left;
    font-size: 1.1em;
    font-weight: bold;
    padding: 0;
    margin: 0;
    }
    #timeAndDate
    {
    float: right;
    font-size: 1.1em;
    font-weight: bold;
    padding: 0;
    margin: 0;
    }
    #topContainerBottom {
     clear: left;
     width: 96em;
     background: #F4ECD9;
     text-align: left;
     border: 1px solid #eda;
     margin: 0 auto 1em auto;
    }
    #topContainerBottom #pageTitle
    {
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.2em 0 0.6em 1em;
    margin: 0;
    background-color: #FFFFFF;
    }
    #navigation, #navigation ul {
     float: left;
     width: 96em;
     list-style: none;
     line-height: 1;
     background: #FFFFFF;
     font-weight: bold;
     padding: 0;
     border: solid #eda;
     border-width: 1px 0;
     margin: 0 0 1em 0;
     z-index:2;
    }
    #navigation a {
     display: block;
     width: 10em;/*10*/
     w\idth: 10em;/*6*/
     color: #7C6240;
     text-decoration: none;
     padding: 0.25em 2em;
    }
    #navigation li {
     float: left;
     padding: 0;
     width: 14em;/*10*/
    }
    #navigation li li {
     padding-right: 1em;
     width: 14em/*13*/
    }
    #navigation li ul {
     position: absolute;
     left: -999em;
     height: auto;
     width: 14.4em;/*14.4*/
     w\idth: 14.8em;/*13.9*/
     font-weight: normal;
     border-width: 0.25em;
     margin: 0;
    }
    #navigation li ul a {
     width: 13em;/*13*/
     w\idth: 10.8em;/*9*/
    }
    #navigation li:hover ul, #navigation li.sfhover ul
    {
    left: auto;
    }
    #navigation li:hover, #navigation li.sfhover
    {
    background: #eda;
    }
    #breadCrumbs
    {
    float: left;
    font-size: 1.1em;
    font-weight: normal;
    padding: 0;
    margin: 0 0 0 0.5em;
    }
    #userStatus
    {
    float: right;
    font-size: 1.1em;
    font-weight: normal;
    padding: 0;
    margin: 0 0.5em 0 0;
    }
    #midContainer
    {
    clear: left;
    background: #F4ECD9;
    border: 1px solid #000;
    padding: 0;
    margin: 0 auto;
    width: 96em;
    }
    #midContainerNavigation
    {
    float: left;
    z-index:1;
    border: 1px solid #000000;
    margin: 1em 0.5em 1em 0.5em;
    }
    #subNavigation
    {
    /*margin: 0 0.5em 1em 0.5em;*/
    margin: 0;
    padding: 0;
    list-style: none;
    width: 15em;
    border-bottom: 1px solid #eda;
    text-align: left;
    }
    #subNavigation ul
    {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 15em;
    border-bottom: 1px solid #eda;
    text-align: left;
    }
    #subNavigation li
    {
    position: relative;
    }
     
    #subNavigation li ul
    {
    position: absolute;
    left: 15em;
    top: 0;
    display: none;
    }
    #subNavigation li a
    {
    display: block;
    text-decoration: none;
    color: #7C6240;
    background: #fff; /* IE6 Bug */
    padding: 5px;
    border: 1px solid #eda;
    border-bottom: 0;
    font-weight: bold;
    }
    #subNavigation li ul li a 
    {
    padding: 2px 5px;
    font-weight: normal;
    }
    /* Fix IE. Hide from IE Mac \*/
    * html #subNavigation li { float: left; height: 1%; }
    * html #subNavigation li a { height: 1%; }
    * html #subNavigation li ul li{ float: left; height: 1%; }
    * html #subNavigation li ul li a { height: 1%; }
    /* End */
    #subNavigation li a:hover
    {
    color: #7C6240;
    background: #eda;
    }
      
    #subNavigation li:hover ul, #subNavigation li.over ul
    {
    display: block;
    }
    #midContainerContent
    {
    margin: 1em 0.5em 1em 0.5em;
    width: 76em;
    float: right;
    /*border-left: 1px dashed #7C6240;*/
    border: 1px solid #000000;
    padding: 1em;
    text-align: left;
    }
    #bottomContainer
    {
    clear: both;
    width: 96em;
    background: #F4ECD9;
    text-align: left;
    border: 1px solid #eda;
    margin: 1em auto 0 auto;
    }
    .clearer{
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    </style>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
     var sfEls = document.getElementById("navigation").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
       this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
     }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //Sub Nav
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("subNavigation");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace(" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;
    //--><!]]></script>
    </head>
    <body>
    <div id='topContainerTop'> 
      <p id='productAndCompany'>EMS: Computer Sciences Corporation</p>
      <p id='timeAndDate'>12:59:59 am on Wednesday, 31st December, 2004 (GMT)</p>
    </div>
    <div id="topContainerBottom"> 
      <h1 id='pageTitle'>Generic Page Title / Category Goes Here</h1>
      <ul id="navigation">
    	<li id='navigationHome'><a href='#'>Home</a> 
    	  <ul>
    		<li><a href='#'>News Archive</a></li>
    		<li><a href='#'>Your Account</a></li>
    		<li><a href='#'>Forum</a></li>
    		<li><a href='#'>Miscellaneous</a></li>
    		<li><a href='#'>Site Map</a></li>
    		<li><a href='#'>Help</a></li>
    	  </ul>
    	</li>
    	<li id='navigationHumanResource'><a href="#">Human Resource</a> 
    	  <ul>
    		<li><a href="#">Recruitment</a></li>
    		<li><a href="#">Personnel</a></li>
    	  </ul>
    	</li>
    	<li id='navigationProjects'><a href="#">Projects</a> 
    	  <ul>
    		<li><a href="#">Clients</a></li>
    		<li><a href="#">Projects</a></li>
    		<li><a href="#">Assignments</a></li>
    	  </ul>
    	</li>
    	<li id='navigationFinance'><a href="#">Finance</a> 
    	  <ul>
    		<li><a href="#">Payroll</a></li>
    		<li><a href="#">Project Costing</a></li>
    		<li><a href="#">Project Billing</a></li>
    	  </ul>
    	</li>
    	<li id='navigationAdministration'><a href='#'>Administration</a> 
    	  <ul>
    		<li><a href='#'>Users</a></li>
    		<li><a href='#'>System</a></li>
    		<li><a href='#'>Locality</a></li>
    		<li><a href='#'>Priviledges</a></li>
    		<li><a href='#'>Log</a></li>
    	  </ul>
    	</li>
      </ul>
      <p id='breadCrumbs'><a href='#'>Home</a> / <a href='#'>Your Account</a></p>
      <p id='userStatus'>Logged in as Jayawi Sriyanjan Perera (Administrator) <a href='#'>[Logout]</a></p>
    <div class="clearer"></div>
    </div>
    <div id="midContainer"> 
      <div id='midContainerNavigation'> 
    	<ul id="subNavigation">
    	  <li><a href="#">Your Account</a></li>
    	  <li><a href="#">Profile</a> 
    		<ul>
    		  <li><a href="#">Avatar</a></li>
    		  <li><a href="#">Password</a></li>
    		  <li><a href="#">Preferences</a></li>
    		</ul>
    	  </li>
    	  <li><a href="#">Messages</a> 
    		<ul>
    		  <li><a href="#">Compose</a></li>
    		  <li><a href="#">Inbox</a></li>
    		  <li><a href="#">Outbox</a></li>
    		  <li><a href="#">Contacts</a></li>
    		</ul>
    	  </li>
    	  <li><a href="#">To Do List</a> 
    		<ul>
    		  <li><a href="#">Projects</a></li>
    		  <li><a href="#">Assignments</a></li>
    		  <li><a href="#">Tasks</a></li>
    		</ul>
    	  </li>
    	</ul>
      </div>
      <div id='midContainerContent'> content<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	content<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	content
     
     </div>
    <div class="clearer"></div>
    </div>
    <div id='bottomContainer'> The I own This Nonsense Nonsense </div>
    </body>
    </html>
    Hope that helps.

    Paul

  3. #3
    *munch munch* killerkooki's Avatar
    Join Date
    Sep 2004
    Location
    Singapore
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you sooooo much. I am in you debt


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
  •