CSS issue in joomla, how to set smaller spacing between line

Posted on 2011-04-19
Last Modified: 2012-05-11
I am using a horizontal menu to the left

Probem is that size of module is constant.
I need the distances between each of the top level menu links to be smaller.
Reason beeing that if not the last menu point falls outside when you hold mouse over.
I am using firebug, but not able to find the CSS settings for  the distance between the top level menu. If I can reduse the spacing with 25% It will all fit inside the menu windows
Question by:morten444
    LVL 7

    Accepted Solution

    by: a {
        cursor: pointer;
        display: block;
        height: 30px;

    That "height: 30px;" reference is what's giving all the white space under the parent navigation items.  Reduce it to 24px, or ideally remove the height declaration all together, and use line-height (in ems) instead, and you'll get the desired effect.

    That said, the most ideal situation is to make your left nav area flexible, if someone can't see the screen and uses CTRL-Scroll (on their mouse) to make the text bigger, your menu will get really messed up visually and will become unusable.  Something to think about.
    LVL 12

    Expert Comment

    try a:hover .l, a:hover .m{top:-5px}
    LVL 12

    Expert Comment

    by:Dean OBrien
    Did this solve your problem?

    Author Comment

    Sorry, Been away. I will check this up over the next days and come back to you
    Thanks for your answers so far


    Author Closing Comment

    Sorry for delay
    This did the magic

    Thanks for your help
    LVL 7

    Expert Comment

    Glad it worked.  Thank you for taking the time to review my answer.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    First of all, we will need Jumi component or Sourcerer plugin for this to work. We need either of these because the main focus here is custom development outside of the standard modules or articles within Joomla. You can find Jumi's my …
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now