...

View Full Version : Nav Bar positioning issues



januads
11-19-2010, 06:10 PM
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-----//


<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;

}

//-------------------------//

Excavator
11-20-2010, 04:32 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum