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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Nav Bar positioning issues

    Hi I have this website Chileagenda.com and i cant seem to get my navbar in line with the frame of my whole setup its working fine with IE but in safari and firefox it shows up jutting out on the left hand side.

    here is the CSS and html code. Hope some one can tell me what mistake i am making as i don't seem to find it.

    //-----html-----//
    Code:
    <CENTER>
    
    <div id="navigation">
    
     <TABLE  height="27" width="900" cellSpacing="0" cellPadding="0" border="0">
    
    <TR>
      <TD background="nav.jpg" height="30" width="900">
     
    <UL class=menu_color2>
    
    <LI>Home
      <UL>
        <LI><a href="http://www.chileagenda.com"><img title="chileagenda.com in english" src="icons/united.png" height="10" border="0"> In English</a></LI>
        <LI><a href="http://www.chileagenda.cl"><img src="icons/chile1.png" height="10" border="0"> En Espa&ntilde;ol</a></LI></UL></LI>
    <LI>Importers
      <UL>
        <LI><a href="http://www.chileagenda.com/zofri.html">Mall Zofri</a></LI>
        <LI><a href="http://www.chileagenda.com/importadora-matrix.html">Matrix S.A </a></LI>
        <LI><a href="http://www.importadorabhakti.info" target="_blank">Importer Bhakti </a></LI>
        <LI><a href="http://www.chileagenda.com/importadora-kevin.html">Kevin</a></LI></UL></LI>
    <LI>Services
      <UL>
        <LI><a href="http://www.chileagenda.com/hotels.html">Accomodation</a></LI>
        <LI><a href="http://www.chileagenda.com/used-cars.html">Used Cars</a></LI>   
        <LI><a href="http://www.chileagenda.com/dance.html">Dance Institutes</a></LI>
        <LI><a href="http://www.chileagenda.cl/centro-estetica-mechitas.htm" target="_blank">Beauty</a></LI>
        <LI><a href="http://www.chileagenda.cl/comercializadora-relaxin-10.htm" target="_blank">Massage</a></LI>
        <LI><a href="http://www.chileagenda.cl/joyas-xio.htm" target="_blank">Jewelry</a></LI></UL></LI>
    <LI>Hotels
      <UL>
        <LI><a href="http://www.chileagenda.com/hotels.html">Guide</a></LI>
        <LI><a href="http://www.chileagenda.cl/hotel-pan-de-azucar.htm" target="_blank">Pan De Azucar</a></LI>
        <LI><a href="http://www.chileagenda.cl/hotel-las-dunas.htm" target="_blank">Hotel Las Dunas</a></LI>
        <LI><a href="http://www.chileagenda.cl/hostal-casa-norte.htm" target="_blank">Hostal Casa Norte</a></LI>
        <LI><a href="http://www.chileagenda.cl/hostal-uma-jaqi.htm" target="_blank">Hostal Uma Jaqi</a></LI>
        <LI><a href="http://www.chileagenda.cl/hostal-brisamar.htm" target="_blank">Hostal Brisamar</a></LI>
        <LI><a href="http://www.chileagenda.cl/hostal-beach.htm" target="_blank">Hostal Beach</a></LI>    
        <LI><a href="http://www.chileagenda.cl/hostal-urkupina.htm" target="_blank">Hostal Urkupi&ntilde;a </a></LI></UL></LI>
        <LI>Places
      <UL>
        <LI><a href="http://www.chileagenda.com/zofri.html">Zofri</a></LI>
        <LI><a href="http://www.chileagenda.com/places-to-visit-in-iquique.php">Iquique</a></LI>
        <LI><a href="http://www.chileagenda.cl/museo-naval.htm" target="_blank">Museo Naval</a></LI>
        <LI><a href="http://www.chileagenda.cl/museo-regional.htm" target="_blank">Museo Regional</a></LI>
        <LI><a href="http://www.chileagenda.cl/teatro-municipal.htm" target="_blank">Teatro Municipal</a></LI>
        <LI><a href="http://www.chileagenda.cl/cavancha.htm" target="_blank">Playa Cavancha</a></LI>
        <LI><a href="http://www.chileagenda.cl/paseo-a-la-boya.htm" target="_blank">Paseo en Lancha</a></LI>    
        <LI><a href="http://www.chileagenda.cl/pica-2007.htm" target="_blank">Pica</a></LI></UL></LI>
    <LI>Used Cars
      <UL>
        <LI><a href="http://www.chileagenda.com/used-cars.html">Guide</a></LI>
        <LI><a href="http://www.chileagenda.com/importadora-kevin.html">Used Cars Kevin </a></LI></UL></LI>
    <LI>Wisdom
      <UL>
        <LI><a href="http://www.chileagenda.com/marriage-wisdom.html">Marraige</a></LI></UL></LI>
    <LI>TechTalk
      <UL>
        <LI><a href="http://www.chileagenda.com/techtalk/index.html" target="_blank">iMobile</a></LI>
            <LI><a href="http://www.chileagenda.com/techtalk/bbmessenger-for-iphone.php">iMessenger</a></LI>
           <LI><a href="http://www.chileagenda.com/techtalk/radio-for-iphone.html">iRadios </a></LI> </UL></LI>
    <LI>Motorsports
      <UL>
        <LI><a href="http://www.chileagenda.cl/automovilismo.htm" target="_blank">Cup 2010</a></LI>
        <LI><a href="http://www.chileagenda.cl/tuning.htm" target="_blank">Tuning Cars</a></LI>
        <LI><a href="http://www.chileagenda.cl/autos-chocadores.htm" target="_blank">BumperCars</a></LI></UL></LI>
    <LI>Media
      <UL>
        <LI><a href="http://www.chileagenda.cl/imagenes-iquique.htm" target="_blank">Foto Iquique 2010</a></LI>
        <LI><a href="http://www.chileagenda.cl/imagenes-iquique-2009.htm" target="_blank">Iquique 2009</a></LI>
        <LI><a href="http://www.chileagenda.cl/imagenes-iquique-2008.htm" target="_blank">Iquique 2008</a></LI>
        <LI><a href="http://www.chileagenda.cl/imagenes-iquique-2007.htm" target="_blank">Iquique 2007</a></LI>
        <LI><a href="http://www.chileagenda.cl/imagenes-iquique-2006.htm" target="_blank">Iquique 2006</a></LI>
        <LI><a href="http://www.chileagenda.cl/videos.htm" target="_blank">Videos of Iquique</a></LI></UL></LI>
    <LI>News
      <UL>
        <LI><a href="http://www.elreporterodeiquique.cl" title="Diario El Reportero de Iquique" target="_blank">El Reportero</a></LI>
        <LI><a href="http://www.diariodecuatroaseis.cl" title="Diario De Cuatro A Seis" target="_blank">De Cuatro a Seis</a></LI>
        <LI><a href="http://www.estrellaiquique.cl" title="Diario La Estrella" target="_blank">La Estrella</a></LI>
        <LI><a href="http://www.diario21.cl/" title="Diario 21" target="_blank">Diario 21</a></LI>
        <LI><a href="http://www.cavancha.cl" title="Diario Cavancha" target="_blank">Cavancha</a></LI>
        <LI><a href="http://www.iquiquenoticias.blogspot.com" title="Diario Iquique Noticias" target="_blank">Iquique Noticias</a></LI>
        <LI><a href="http://eltarapaca.wordpress.com/" title="Diario El Tarapacá" target="_blank">El Tarapac&atilde;</a></LI></UL></LI>
    
    <LI>Publicity
      <UL>
        <LI><a href="http://www.chileagenda.com/contact.html" title="Advertise with us" target="_blank">Advertise Here</a></LI></UL></LI>
        <LI>Share
      <UL>
         <LI><a href="http://www.facebook.com/chileagenda" target="_blank"><img title="Facebook" src="icons/facebook.png" height="15" border="0">Facebook</a></LI>
         <LI><a href="http://www.twitter.com/chileagenda" target="_blank"><img title="tweet" src="icons/tweet.png" height="15" border="0">Twitter</a></LI>
         <LI><a href="mailto:escavar@chileagenda.com"><img title="Email" src="icons/email.png" height="15" border="0">Email</a></LI>
         <LI><a href="http://www.youtube.com/grecobarrera" target="_blank"><img title="YouTube" src="icons/YouTube1.png" height="15" border="0">YouTube</a></LI>
        <LI><a href="http://feeds.feedburner.com/ChileAgenda" target="_blank"><img src="icons/RSS.png" height="15" border="0">RSS</a></LI></UL></LI>
    
    </TD></TR></TBODY></TABLE></div></CENTER>
    
    
    //-------css------//
    
    
    .navigation {
             background: #DED9D0 url(images/nav.gif) repeat-x; 
             height: 25px;
             border-top: 1px solid #996;
             }
            .navigation a 
             {
             background: #FFF url(images/nav.gif) repeat-x;
             border-right: 1px solid #C9C6B3;
             color: #553;593.	float: left;
             font: bold 1em Tahoma,sans-serif;
             padding: 0 14px;
             line-height: 25px;
             text-align: center;
             text-decoration: none;
             }
             
             .navigation a:hover,
             .navigation a#active {background-position: left bottom; color: #331;
             }
    
    
    ul.menu_color2 li
    
    {
    
    	
    
    	display:block;
    
    	position:relative;
    
            left:-41px;
    
    	padding:7px 5px;
    
    	background: #e0e0e0 url(index_archivos/barra_eventos_sup.jpg) repeat-x;
    
            border-right: 1px solid #C9C6B3;
    
            color: #553;
    
            font: bold 12px Tahoma,sans-serif;
    
            color: #414141;
    
    	border-bottom:1px solid #d4d4d4;
    
    	border-top: 1px solid #996;
    
    	border-left:1px solid #sss;
    
    	width:115px;
    
            
    
    }
    
    ul.menu_color2 li:hover
    
    {
    
    	background: #dedfff; repeat-x; height: 12px;
    
    
    
            border-top:0px solid #996;
    
    	border-right:1px solid #C9C6B3;
    
    	border-bottom:1px solid #d4d4d4;
    
    
    
    	border-left:1px solid #sss;
    
    }
    
    ul.menu_color2 > li > ul
    
    {
    
    	position:absolute;
    
            left:1px;
    
    	top:29px;
    
    	display:none;
    
    	list-style:none;
    
    }
    
     
    
    ul.menu_color2 li:hover > ul
    
    {
    
    	display:block;
    
    }
    
    ul.menu_color2 > li
    
    {
    
    	display:inline;
    
    }
    
    //-------------------------//

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello januads,
    Your menu really should not be in a table... It seems it's your positioning that's causing the problem.
    You style .navigation but in your markup it is an id="navigation", or #navigation.

    Maybe a good place to start would be validating your code. Have a look at the links about validation in my signature line.

    Then, you might be interested in a different approach for your menu. Have a look at a few menu examples at http://nopeople.com/design/CSS%20tips/index.html
    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


  •  

    Tags for this Thread

    Posting Permissions

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