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
    May 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Horizontal Menu below bottom of Div in FF

    Newbie: the hrzntl menu drops down below the div. in Firefox. i've tried many "games"...zeroed all marin/padding out etc. Here is the CSS and HTML:
    Code:
    body {
     margin: 0 0 0 0;
     padding: 0 0 0 0;
     
     /*background-color: teal;*/
     color: white;
     border: 1px solid brown;
     /*background-image: url(photos/BoatsSbng120x60.jpg);
     background-repeat: repeat;*/
     background-color: #EEEEFF;
     font: small Arial, Helvetica, Verdana, sans-serif;
    }
    #wrapper {
    	width: 1003px;
      background-color: green;
      color: black;
      border: 1px solid black;
      margin: 30px 40px 30px 40px;
      padding: 0 0 0 0;
    }
    #above-logo-line{
      background-color: white;
      text-align: center;
      width: 1000px;
      /*width: 100%;*/
      height: 20px;
      color: black;
      margin: 0 0 0 0;
      padding: 3px 3px 3px 3px;
      
      border: 1px purple;
      
     } 
    #header{
      width: 1000px;
      /*width: 100%;*/
      height: 100px;
      
      margin: 0 0 0 0;
      padding: 0 0 0 0;
      
      border: 1px solid black;
      background-color: blue;
     } 
    img.floatleft {   
        padding: 0 0 0 0;
        margin: 0 0 0 0;
    	float: left;
    	
    	/*margin: 0 0 0 0;*/
    }
    img.floatright {   
        /*padding: 0 0 0 0;*/
        /*margin: 0 0 0 0;*/
    	/*border: blue 5px;*/
    	float: right;
    	/*margin: 0 0 10px 15px;*/
    }
    img.top { 
    vertical-align:text-top
    }
    /*img.bottom {
    	vertical-align:text-bottom
    	}*/
    #header-bottom{
    	font-weight: bold;
    	text-align:center;
    	background-color: white;
    	/*padding: 1em;*/
      border: 1px solid brown;
      /*border-top: 1px solid brown;
      border-bottom: 1px solid brown;*/
     margin:0 0 0 0;
      padding: 0 0 0 0;
      height: 1%;
      /*padding-top: 1em;*/
      /*padding-bottom: .5em;*/
    }
    #header-bottom ul {
     /*margin: o; was here*/
     margin-top: 0;
     /*height: 1%;*/
     margin:0 0 0 0;
      padding: 0 0 0 0;
     /*padding: 0 30px 0 0;*/
     text-align: center;  
    }
    #header-bottom li {
      list-style: none;
      float: left;
      
      margin:0 0 0 0;
      padding: 0 0 0 0;
      /*display: inline;*/
    }
    #header-bottom a {
     text-decoration: none;
     border: 1px solid; 
     border-color: blue blue white blue; 
     /*padding: .5em .2em;*/
     margin:0 0 0 0;
      padding: 0 0 0 0;
    }
    #header-bottom a:link, #header-bottom a:visited {
      /*text-decoration: none;*/
      /*background-color: blue;*/
      margin:0 0 0 0;
      padding: 0 0 0 0;
    	}
    
    #tagline {
      font-weight: bold;
      border: 1px solid blue;
      background-color: #fdf8f2;
      color: #050845;
      font-style: italic;
      margin:0;
      padding: 0 0 0 20px;
      width: 300px;
      float: left;
    }
    #main {
    	position: relative;
    	clear: left;
    	border: 1px solid brown;
    	background-color: blue;
    	top: 0;
    	width: 100%;
    	/*margin-top: 10px;*/
    	margin: 0 0 0 0;
    }
    #content {
      margin: 0 240px 0 160px;
      border: 1px solid brown;
      background-color: white;
      color: black;
    }
    #mainfeature {
      background-image: url(photos/BoatsSbng120x60.jpg);
      background-repeat: no-repeat;
      background-position: center left;
      background-color: #E0EFEF;
      color: black;
      padding: 2em 2em 1em 200px;
       /*height: 100%;*/
    }
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    	
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title>Untitled Document</title>
    		<link href="YPT3.css" rel="stylesheet" type="text/css" media="all" />
    		<!--<div style=header: solid 1px yellow; overflow: hidden; </div>-->
    		
    	</head>
    	
    <body>
    
    <div id="wrapper">
    <!--A wrapper beg.-->
    <div id="above-logo-line">
    <!--B above-logo-line beg-->	
     Palawan, Philippines Travel....Adventure....Backpacking......QUALITY......Independant Information
     </div>
     <!--B above-logo-line end--> 
     <div id="header">
    <!--C header beg-->
           
    	 <img  class="floatleft" src = "photos\TrnsprtMrktRxs250x100.jpg" alt="Palawan-El-Nido"/>
    	<img  class="floatleft" src = "photos\Logo500x100.png" alt="Yes-Palawan-Travel"/>
    	<img  class="floatright" src = "photos\FrmElNdRm250x100.jpg" alt="Palawan-El-Nido"/>
    </div> 
    <!--C header end-->	
    	
    	
      <div id="header-bottom">
    <!--D header bottom beg-->
    
      
     <ul>
      <li><a href="">Homepage</a></li>
      <li><a href="">Puerto Princesa</a></li>
      <li><a href="">Central Palawan</a></li>
      <li><a href="">Northern Palawan</a></li>
      <li><a href="">Southern Palawan</a></li>
      <li><a href="">Palawan Hotspots</a></li>
     </ul>
      </div>
    <!--D header bottom end-->
        
    
    <div id="main">
    <!--E main beg-->
    <div id="content">
    <!--F content beg-->
    
    <div id="mainfeature">
    <!--G mainfeature beg-->
     <h2>Travel on Palawan Island</h2>
     <p>

  • #2
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Any chance of a link or at least a screenshot of the problem/what it should look like?

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    can't paste the screen shot....

    Thanks for your reply. i can't paste an image copy on to this message box...no URL either..sorry.
    but, the horizontal menu(labeled #header-bottom) seems to be pushed down 1em in the DIV in both FF and IE. And, FF gives it some more padding above and below the text inside the links "a". So, it's pushed under the DIV bottom.
    my code has a lot of trial and error. is FF reading some things i have deactivated>> /* */ ?
    Many thanx, again. Arto


  •  

    Posting Permissions

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