CODEWITHSUNDEEP
htmlcss
user92454
user92454

Reputation: 1211

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

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?

CSS and html as follows

#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;
}
<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>

Upvotes: 1

Views: 4134

Answers (7)

Maxim
Maxim

Reputation: 13

Simply display:inline-block on both li & a did the trick for me man. Lists stretched to accommodate whatever I did with the links.

Upvotes: 0

Jarvklo
Jarvklo

Reputation: 41

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;    
    }

Upvotes: 0

Brian Moeskau
Brian Moeskau

Reputation: 20419

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

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

Upvotes: 0

Killroy
Killroy

Reputation: 921

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.

Upvotes: 0

Shiva Srikanth Thummidi
Shiva Srikanth Thummidi

Reputation: 2908

give style to anchor as

 display:block

Upvotes: 0

Gerald Senarclens de Grancy
Gerald Senarclens de Grancy

Reputation: 7344

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;

Upvotes: 2

Adrian Mester
Adrian Mester

Reputation: 2533

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

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

Upvotes: 0

Related Questions