SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    Michigan
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox not playing nice

    Hello,
    I'm having a problem making the navigation bar sit flush with the bottom header border in firefox. IE 6 and Opera 7.54 the navigation is placed as I would like it. Firefox seems to split the deference of the nav bar.

    Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html>
        <head>
      	<title>
      	  IB WebHost dot com
      	</title>
      	<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
      <style type="text/css">
      /* commented backslash hack \*/ 
      		html, body{height:100%;} 
      		/* end hack */
      body {
      	margin: 0px;
      	padding: 0px;
      	 font-size: 12px;
      	 font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
      	 text-align: justify;
      	background-color: #87cefa;
      	 background-image: url(images/bg.gif) 
      }
      #wraper {
      	margin-left:auto;
      	 margin-right:auto;
      	 margin-top:0px;
      	 margin-bottom:-50px;
      	 padding:0px;
      	 width:755px;
      	/* height:100%; */
      	 min-height:100%;
      	 height:auto;
      	 background-color: #F0FFFF;
      	 color:#000000;
      }
      * html #wraper {
      	height:100%;
      }
      .header {
      	font-size: 3.5em;
      	font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
      	font-weight: bold;
      	text-align: center;
      	width:755px;
      	height:100px;
      	position: absolute;
      	top:0px;
      	background-color: #778899;
      	color:#FFFFFF;
      }
      .header p {
      	margin:0px;
      	padding-top:20px;
      	text-align:center;
      }
      
      #navigation {
      	position: relative;
      	 top: 75px;
      	 width: 755px;
      	 padding:0;
      	 z-index: 10;
      }
      
      #navigation ul {
      	margin-left: 0;
      	padding-left: 0;
      	list-style-type: none;
      	font-family: Arial, Helvetica, sans-serif;
      	 font-size:1em;
      	white-space: nowrap;
      }
      
      #navigation ul li {
      	display: inline;
      }
      
      #navigation a {
      	float: left;
      	text-decoration: none;
      	padding:5px;
      	border-right: #fff solid 1px;
      	background-color: #8F708F;
      	color: #fff;
      }
      
      #navigation a:hover, #navigation a:active, #navigation a:focus {
      	background-color: #7D8F70;
      	 color: #000;
      }
      div.clear  {
      		clear:both;
      		height:1px;
      		overflow:hidden;
      		margin-top:-1px;
      }
      </style>
        </head>
        <body>
      	<div id="wraper">
      		 <div class="header">
     		 	<p>HEADER TEXT HERE</p>			
      			</div>
      				<div id="navigation">
     					<ul>
     		 		 <li><a href="#">Link one</a></li>
     		 		 <li><a href="#">Link two</a></li>
     		 		 <li><a href="#">Link three</a></li>
     		 		 <li><a href="#">LInk five</a></li>
     		 		 <li><a href="#">Link six</a></li>
     					</ul>
     		 		<div id="clear"></div>
      				</div>
      			</div>
      	</body>
      	</html>
    Could this be a firefox bug? What threw me was Opera rendered the nav bar right after I added a z-index 10.
    Bill Rosa


  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this :
    Code:
      #navigation {
      	position: relative;
    	margin-top:75px;
      	 width: 755px;
      	 padding:0;
      	 z-index: 10;
      }
      * html #navigation {
      top:75px;}
      #navigation ul {
      	margin-left: 0;
      	padding-left: 0;
      	list-style-type: none;
      	font-family: Arial, Helvetica, sans-serif;
      	 font-size:1em;
      	white-space: nowrap;
      }
      
      #navigation ul li {
      	display: inline;
    	line-height:25px;
      }

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    Michigan
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply BonRouge. That didn't seem to fix the problem with firefox. Here is the code. I made some changes.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html>
          <head>
        	<title>
        	  IB WebHost dot com
        	</title>
        	<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
        <style type="text/css">
        /* commented backslash hack \*/ 
        		html, body{height:100%;} 
        		/* end hack */
        body {
        	margin: 0px;
        	padding: 0px;
        	 font-size: 12px;
        	 font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        	 text-align: justify;
        	background-image: url(images/bg.gif)
        }
        #wraper {
        	margin-left:auto;
        	 margin-right:auto;
        	 margin-top:0px;
        	 padding:0px;
        	 width:755px;
        	height:100%;
        	 min-height:100%;
        	 background-color: #F0FFFF;
        	 color:#000000;
        }
        * html #wraper {
        	height:100%;
        }
        #header {
        	font-size: 3.5em;
        	font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        	font-weight: bold;
        	text-align: center;
        	margin:0px;
        	width:755px;
        	height:100px;
        	position: relative;
        	top:0px;
        	background-color: #778899;
        	color:#FFFFFF;
        }
        #header p {
        	margin:0px; 
        	padding-top:20px;
        	text-align:center;
        }
        
        #nav {
        	float:left;
        	/* top:100px; */
        	width:755px;
        	background-color: Green;
        	color:#000;
        	z-index:1;
        }
        
        #navigation {
        	float:left;
        	 /* top: 100px; */
        	 width: 755px;
        	 padding:0;
        	 z-index: 10;
        }
        
        #navigation ul {
        	margin-left: 0;
        	padding-left: 0;
        	list-style-type: none;
        	font-family: Arial, Helvetica, sans-serif;
        	 font-size:1em;
        	white-space: nowrap;
        }
        
        #navigation ul li {
        	display: inline;
        }
        
        #navigation a {
        	float: left;
        	text-decoration: none;
        	padding:5px;
        	border-right: #fff solid 1px;
        	background-color: #8F708F;
        	color: #fff;
        }
        
        #navigation a:hover, #navigation a:active, #navigation a:focus {
        	background-color: #7D8F70;
        	 color: #000;
        }
        div.clear  {
        		clear:both;
        		height:1px;
        		overflow:hidden;
        		margin-top:-1px;
        }
        </style>
          </head>
          <body>
        	<div id="wraper">
        		 <div id="header"><p>HEADER TEXT HERE</p></div>
        				<div id="nav">
     					<div id="navigation">
     						<ul>
     		 		 	<li><a href="#">Link one</a></li>
     		 		 	<li><a href="#">Link two</a></li>
     		 		 	<li><a href="#">Link three</a></li>
     		 		 	<li><a href="#">LInk five</a></li>
     		 		 	<li><a href="#">Link six</a></li>
     						</ul>
     		 			<div id="clear"></div>
     					</div>
        				</div>
        			</div>
        	</body>
        	</html>
    In firefox there is a 12px gap of green over the nav bar. Opera 7.54 and IE 6 will get it right.

    I added a link to the page.
    HTML Code:
    http://ibwebhost.com/header.html
    Thanks
    Bill Rosa


  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding this :

    Code:
    ul, li {margin:0; padding:0;}

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    Michigan
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked. Thank you!
    Bill Rosa



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
  •