Forum Moderators: not2easy
I've read about this in many posts in this forum but still -after trying all sugested solution- can't get this to work right. Let me start by explaining what am I trying to do. I'm making a new CMS using WordPress that interacts with a vBulletin forum so I'm trying to make the forum to look alike the CMS part. Actually it's going pretty well but there's a part that's making me crazy.
I have a navigation bar under the logo part. The logo (and a advertisement banner) are placed inside a <div> tag and right under it, there's another <div> tag that holds the nav bar. What happens here, is that the first <div> container is by default side-by-side with the second <div> container so when I set a padding of 0 0 15px 0 (15px to the bottom only) to the top container, the nav bar is placed propperly. It works that way in IE8 but not in Firefox where it leaves like 10 pixels of separation below the first container by default so 15px of padding turn to 25px which is too much.
I'v copied and pasted the tags from the CMS and CMS's CSS file to make them look the same but is not working>
CSS:
body
{
background: #d1d8db url(../../images/custom_style_1/misc/bg.jpg) repeat-x top center;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 0 0 0 0;
padding: 0px;
overflow: auto;
}
.top_bar {
padding: 25px 0 25px 0;
clear:both;
}
.top_bar img {
display: block;
}#container { overflow:hidden; }
.col-left { float: left; }
.col-right { float: right; }
.col-full { width: 960px; margin: 0 auto; }
#navigation, #page-nav {font-size:11px; padding: 0 0 8px 0; }
#navigation a:hover, #page-nav {border:none;}
#page-nav ul.rss{background:url(../../images/custom_style_1/misc/ico-rss.png) no-repeat right 8px; padding:0 35px 0;}
#page-nav ul.rss li{float:left;width:auto;}
#page-nav ul.rss a { line-height:29px; display:block; padding:0 10px; }
/* 2.2.1 Page Navigation */
#page-nav { position:relative; background:url(../../images/custom_style_1/misc/bg-pagenav.png) repeat-x; height:29px; font-family:Verdana, Geneva, sans-serif; font-size:10px; text-transform:uppercase; }
#page-nav a { color:#eee; text-decoration:none; text-shadow: #333 0px 1px 0px; }
#page-nav a:hover { background:url(../../images/custom_style_1/misc/nav-hover.png) repeat; color:#fff; }
#page-nav .ico-home { padding:7px 0 6px 0; border: none; }
#nav, #nav ul { position:relative; z-index:200; margin:0; padding:0; list-style:none; line-height:1; }
#nav a { display:block; z-index:200; padding:0 10px; line-height:29px; text-decoration:none;}
#nav li { float:left; width: auto; }
#nav li ul { position: absolute; left: -999em; width: 180px; }
#nav li ul li { background: #7d7d7d; }
#nav li ul li a { width:160px; line-height:26px; color:#eee; }
#nav li ul li a:hover { color:#fff; }
#nav li ul ul { margin: -26px 0 0 180px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left:-999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover,#nav li.hover { position:static; }
..........
HTML:
<body>
<!-- BEGIN TEMPLATE: header --><!-- logo -->
<a name="top"></a>
<table border="0" width="960" cellpadding="0" cellspacing="0" align="center" class="top_bar">
<tr>
<td align="left"><a href="index.php"><img src="images/misc/logo01.png" border="0" alt="Pesca y Devolución" /></a></td>
<td align="right" id="header_right_cell">
<!-- AD GOES HEE -->
</td>
</tr>
</table>
<!-- /logo -->
<div id="navigation">
<div id="page-nav">
<div class="col-full">
<ul id="nav" class="fl">
<li><a href="http://localhost/wp02"><img src="images/misc/ico-home.png" class="ico-home" alt="Inicio" /></a></li>
<li class="page_item page-item-29"><a href="http://localhost/wp02/galeria-de-imagenes/" title="Galería de Imágenes">Galería de Imágenes</a></li>
<li class="page_item page-item-7"><a href="http://localhost/wp02/acerca/" title="Acerca de Nosotros">Acerca de Nosotros</a>
<ul>
<li class="page_item page-item-70"><a href="http://localhost/wp02/acerca/contactenos/" title="Contáctenos">Contáctenos</a></li>
<li class="page_item page-item-139"><a href="http://localhost/wp02/acerca/publicidad/" title="Publicidad">Publicidad</a></li>
<li class="page_item page-item-182"><a href="http://localhost/wp02/acerca/terminos-y-condiciones/" title="Términos y Condiciones">Términos y Condiciones</a></li>
</ul>
</li>
</ul><!-- /#nav1 -->
<ul class="rss fr">
<li><a href="http://localhost/wp02/feed/">Entradas</a></li>
</ul><!-- /.rss -->
</div><!-- /.col-full -->
</div><!-- /#page-nav -->
</div><!-- /#navigation -->
.........
Also, can anyone tell me why the hek the RSS button and label (Entradas) is not aligning to the right like in the CMS? :S
Thanks to everyone in advance.
