Grow your CSS skills. Land your dream job.

Round Corner, Tabbed Menu Problems

  • # July 27, 2008 at 6:07 am

    I am using Joomla 1.5 to create a website. The website has a horizontal, round-corners, tabbed menu. I have followed many articles, tutorials etc on how to implement the CSS and required images, in order to achieve the tabbed menu.

    Unfortunately, I keep getting the same problem; I am able to place and view the larger, right-hand image on the "a" element, but the left-hand image placed in the CSS of the "li" element does not display at all.

    My CSS looks like this:

    .moduletabletabs {
    margin-left: auto;
    margin-right: auto;
    width: 768px;
    border-bottom: 1px solid #8DA5FF;
    margin-bottom: 2em;
    }

    .moduletabletabs li {
    float: right;
    background-image: url(../images/tab_left.gif);
    background-position: left top;
    background-repeat: no-repeat;
    margin: 0 1px 0 0;
    padding: 0 0 0 8px;
    }

    .moduletabletabs a {
    float: right;
    display: block;
    background-image: url(../images/tab_right.gif);
    background-repeat: no-repeat;
    background-position: right top;
    padding: 0.2em 10px 0.2em 0;
    text-decoration: none;
    font-weight: bold;
    color: #333366;
    }

    Any help would be very much appreciated.

    Many thanks.

    # July 27, 2008 at 12:00 pm

    I’ve just looked at the source code for index.php, and the jdoc statement for the top module, ie the one giving me problems, is outputting as a html <table>, not xhtml as defined in my jdoc statement.

    I guess this is the root of my problem, but I can’t seem to change the output of this module to xhtml.

    Any help would be very much appreciated. Thank you.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".