CODEWITHSUNDEEP
cssinternet-explorer-7
Tim Sheiner
Tim Sheiner

Reputation: 3313

IE7 child elements not filling parent

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!

Upvotes: 2

Views: 615

Answers (3)

Shaakunthala
Shaakunthala

Reputation: 11

I tried it but it doesn't seem that there's an issue. Works the same way in IE7 and Firefox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test</title>
        <style type="text/css">
            .tab { width: 500px; }
            .button { width: 100%; }
        </style>
    </head>

    <body>
        <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>
    </body>
</html>

I tried this on my localhost. No issue.

Upvotes: 1

logan
logan

Reputation: 3365

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.

Upvotes: 0

JKirchartz
JKirchartz

Reputation: 18022

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)

Upvotes: 0

Related Questions