joomla css menu ignorin my code

[k0r54]

Hi,

I am using joomla and am using a css menu extension the code produces this

<div class="moduletable_mainmenu">
<ul id="mainlevel_mainmenu"><li><a href="xx/index.php?option=com_frontpage&amp;Itemid=1" class="mainlevel_mainmenu">Home</a></li><li><a href="xx/index.php?option=com_ezrealty&amp;Itemid=2" class="mainlevel_mainmenu" id="active_menu_mainmenu">Landlord</a></li></ul> </div>


I want the menu to be inline and I am using a background image for the buton that is 112px wide and 48 height. There is also a mo.

This is the css i got so far but it doesn't seem to work, it ignores the id code: -


.moduletable_mainmenu li{
display:inline;
}

.mainlevel_mainmenu a{
background:url(../images/m_button.jpg);
width:112px;
height:48px;
}

.mainlevel_mainmenu a:hover{
background:url(../images/m_button_h.jpg);
width:112px;
height:48px;
}


Thanks
k0r54

[scragar]

"#" is for IDs.
"." is for classes.

#mainlevel_mainmenu a{
will work.

[k0r54]

Hi sorry,

yeah i know but although the ul id is mainlevel_mainmenu there is a mainlevel_mainmenu class within the href i have tried both but it still ignores it.

Thanks
k0r54

[scragar]

to test it I added a background declaration.

it only worked with the #, not the . because the a cannot be a child of itself.

but then the width didn't change, so I set it's display to block and it worked...

[k0r54]

hi,

when I set it to block it no longer stays inline :(

Any ideas?

Thanks
k0r54

[k0r54]

Sorry adding float:left to the .moduletable class and removing display:inline done it.

Thanks
k0r54

[Centauri]

You cannot assign a width and height to an inline element, and floating the <a> will convert it to a block level element. Due to IE6 quirks, it is also recommended to float the <li>s as well..moduletable_mainmenu li{
float: left;
list-style: none;
}

.mainlevel_mainmenu a{
background:url(../images/m_button.jpg);
width:112px;
height:48px;
float: left;
line-height: 48px;
}

.mainlevel_mainmenu a:hover{
background:url(../images/m_button_h.jpg);
}