IE7 child elements not filling parent

Question

I have a structure like this:

<ul class="control tabSet buttons vertical ">
  <li class="tab first">
    <button class="button up" id="source">
        <span class="wrap">Label 1</span>
    </button>
  </li>
  <li class="tab last">
    <button class="button up" id="save">
        <span class="wrap">Label 2</span>
     </button>
 </li>
</ul>

In all browsers, except IE7, simply by setting the width of the .button element to 100%, I get the behavior that every child is as wide as the widest child (as determined by the text inside the .wrap element). I do not have to set the width of the parent; it appears to be set by the browser based on the width of the widest child.

In IE7 however (in standards mode) I cannot get the same behavior. Each child is only as wide as it is forced to be by the text it contains. If I do explicitly set the width of the parent, then the children will fill the width. The problem is that I cannot set this width because I do not know before runtime what text will be in each child.

I can imagine solving this with Javascript, but wondered if there is some IE7 CSS trick I can try?

Thanks!

Answer 1

Have you tried a CSS reset? A simple one is

*{margin:0;padding:0}

If you put that @ the top of your CSS file, it should reset internet explorer's default CSS styles (only on margin & padding)

Answer 2

What are the widths of your .tab list items? If they are set to float, and don't specify a width, this could be causing your problem.