No replies to this topic

[Alhazred]

I'm trying to create a Joomla template, I've almost finished but I'm haing a problem with the horizontal menu.

On top of the template I have this

<div id="topbar">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>

which generate this code

<div id="topbar">
    <div class="moduletable">
        <ul class="menu">
            <li id="item-105" class="active">
                <a href="[URL="http://forum.codecall.net/view-source:http://localhost/joomla/j16/templates/index.php?option=com_content&view=featured&Itemid=101"]/joomla/j16/templates/index.php?option=com_content&view=featured&Itemid=101[/URL]" >Home</a>
            </li>
            <li id="item-106">
                <a href="[URL="http://forum.codecall.net/view-source:http://joomla.org/"]http://joomla.org[/URL]" >Joomla.org</a>
            </li>
        </ul>
    </div>
</div>

In that position I've tried to publish the search module and it is surrounded by a white line as I've told in the css for .moduletable class, it works, as with other modules except for the horizontal menu which has no <p> tag or <h3> or similar (adding an <h3> tag with firebug the div successfully surrounded also the menu module).

Now it appears like this

as you can see the div for the menu is 1px tall and then the bottom white line goes under the menu.

How can I make it surround the menu?

the class moduletable is

.moduletable  {
    margin-top:5px;
    background-color:#020086;
    padding:0px;
    border: 1px solid #fff;
}

the CSS of the menu is

.moduletable > ul
{
    height:30px;
    padding-left: 0;
    margin:0;
    background-color: #020086;
    color: White;
    float: left;
    width: 100%;
    font-family: courier new, arial, helvetica, sans-serif;
}

.moduletable > ul li { display: inline;}

.moduletable > ul li a
{
    height:18px;
    padding: 6px 1em;
    background-color: #020086;
    color: white;
    text-decoration: none;
    float: left;
    border-right: 1px solid #fff;
}

.moduletable > ul li a:hover
{
    background-color: #0400D4;
    color: #fff;
}