4

I'm following this tutorial on creating buttons with CSS. http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html

The background for the buttons is set in the UL element. What I've noticed is if I remove the height and width attributes of the UL element the background image disappears as if the UL size goes to zero. This doesn't make sense to me from a box model perspective. The children elements( LI ) have set dimensions and should be stretching out the size of the UL accordingly. Can someone explain what is going on?

    ul {
    list-style-type: none;
    background-image: url(navi_bg.png);
    height: 80px;
    width: 663px;
    margin: auto;
    }
user1232090
  • 43
  • 1
  • 3

3 Answers3

2

The <li>s are floated so they are removed from the document flow which is causing the <ul> to collapse.

To behave like you expect, try adding float: left; to the <ul> as well.

shaunsantacruz
  • 8,903
  • 3
  • 19
  • 19
0

According to the tutorial, the LIs are float: left, which causes them to no longer take up space in the parent element (UL). You need a clearfix to resolve this issue, see this thread: What methods of ‘clearfix’ can I use?

Community
  • 1
  • 1
Tim McLean
  • 1,576
  • 3
  • 14
  • 20
0

A good fix that I always use is putting the <ul> in a <div> as such <div id="nav"><ul>...</ul></div> and then applying the background image to the <div> element.

Better answer:

In your CSS add display: table-row; to the ul element and display: table-cell; to the li elements. This is better than float: left since it doesn't collapse your parent element and display: inline-block since it doesn't present that annoying gap between items.

quentinxs
  • 866
  • 8
  • 22
  • I tried this as well. There were similar problems. Seems like a generally good way of approaching things though. – user1232090 Feb 25 '12 at 05:05