"a" element inside "li" element overflows the "li" element

Question

Hi, I am trying to create a very simple "no-frills" tab using html & css. For this, I have a bunch of li elements and inside each of these, there is a "a href" element. Now, when i look at the output in IE & Firefox (after setting the styles to make the list display horizontally with proper border and everything), I can see that the "a" element overflows the "li" element. How do i make the "li" element resize based on the "a" element?

Edit: Adding the code.

html

<div id="tabs">
                <ul>
            <li><a href="#fragment-1"><span>One</span></a></li>
            <li><a href="#fragment-2"><span>Two</span></a></li>
            <li><a href="#fragment-3"><span>Three</span></a></li>
        </ul>
</div>

here are the styles i am using

#tabs ul
{
    list-style:none;
    padding: 0;
    margin: 0;
}

#tabs li
{
    display: inline;
    border: solid;
    border-width: 1px 1px 1px 1px;
    margin: 0 0.5em 0 0;
    background-color: #3C7FAF;
}

#tabs li a
{
    padding: 0 1em;
    text-decoration: none;
    color:White;
    font-family: Calibri;
    font-size: 18pt;
    height: 40px;
}

Answer 1

You could also have a look at sites like:

1. http://css.maxdesign.com.au/listamatic/
2. http://accessify.com/tools-and-wizards/developer-tools/list-o-matic/
3. http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/

Sometimes it is fun to re-invent the wheel, sometimes it isn't :D

Answer 2

This article from A List Apart on styling lists might help.

Answer 3

You forgot the "#" in the CSS declarations. You've an id="tabs" in you html code which needs to be referenced as

#tabs {
    ....
}

in the CSS. The rest is fine-tuning ;)

And try

#tabs {
    display: inline-block;
}

instead of the display: inline;

Answer 4

Try settings the the display on the li element as "inline-block".

http://www.quirksmode.org/css/display.html

Answer 5

give style to anchor as

 display:block

Answer 6

I give

display:block

to both the li and a tags. Then float the li. You can add this code to make the li enclose the a completely:

overflow: hidden; zoom: 1; word-wrap: break-word;

This will clear anything inside.

Answer 7

You could also simply give your li's some padding:

#tabs li {
    padding: 8px 0 0;
}

Answer 8

Inline-block is a good way to go (as suggested). But if you want this to be cross-browser, you need to add som CSS-hacking "magic" :)

One very good tutorial on the subject is http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Using the method from that article, you'd end up with the following CSS:

/* cross browser inline-block hack for tabs */
/* adapted from:
/* http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */

#tabs ul, 
#tabs li, 
#tabs li a {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: bottom; 

    margin:0; padding:0; /* reset ul and li default settings */

}

/* The rest is "window dressing" (i.e. basically the tab styles from your CSS) */

#tabs li a {
    margin: 0 0.5em 0 0;
    background-color: #3C7FAF;
    padding: 0 1em;
    text-decoration: none;
    color:white;
    font-family: Calibri;
    font-size: 18pt;
    height: 40px;    
    }