IE7 element to expand based on child elements - html

Question

I'm working with vertically aligned items in a list that needs to work in IE7. I've been referencing code on this page which seems to work well cross browser.
I am experiencing an issue in IE7 where the first list item is not expanding to fit the width of the elements inside it. Below is a link to my code.
http://jsfiddle.net/grimmus/jUFMJ/
<ul>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<a href="#">
To Verify
</a>
</div>
</div>
</div>
<div class="outerNumber">
<div class="innerNumber">
<div class="element">
<a href="#">
3903
</a>
</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">To Authorize</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">View Payments</</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">To Submit/Modify</div>
</div>
</div>
</li>
</ul>
The items in the list will be dynamic so it's not really possible to assign a specific width to each LI.
Is anyone aware of a way i can make the list item expand to fit the child elements without a specific width ?

Answer 1

Well, you've got a whole stack of IE7-specific hacks in there (ie the * hacks), but to be honest, some of them are making things worse rather than better.
IE7 does have some CSS issues, and sometimes CSS hacks are justified, but I don't think what you're doing here is really helping.
I was able to get things working much better simply by disabling several of the bits of hacked CSS code.
For example, .items li .outerContainer .innerContainer .element a specifies position:absolute, but only for IE7. This completely changes how the element is positioned, and of course it goes wrong.
And .items li .outerContainer .innerContainer .element,.items li .outerNumber .innerNumber .element specifies top:-50%. This is what is pushing most of your content out of the top of their boxes. If I disable that, the content appears back in view. Not quite in the right place, but visible and usable.
So the first thing I would suggest that you do is remove all of your current IE7-hacks. They are breaking things, not making them better.
Removing those hacks will make your menu usable in IE7. It won't look perfect, but it will be usable. And personally I'd leave it at that. You say you need the site to work in IE7; it will work. It may not look quite as pretty as other browsers, but it will work.
If you really do need to get it pixel perfect in IE7, then yes, you may need a few IE7 hacks. Different ones to the ones you've already tried already though! You need to be a bit more subtle with them. Maybe just adjusting the padding-top on .element or something like that to move the text down to a more central position.
Hope that helps.
[EDITS] Further thoughts on how to resolve the problem...
You mention that padding-top is tricky because some elements go over two lines. This will indeed make it difficult to accurately pad all the elements using a single style. If you know in advance which ones will be longer, you could give them a different padding to the others, but I realise that this might be problematic.
Another angle you could take is Javascript. A small bit of javascript specifically to solve this problem just for IE7 would be fairly simple to achieve, and wouldn't need to have any effect on other browsers.
You could also consider using a JS polyfill library like ie9.js or Selectivizr, which try to fix some of the CSS issues and missing features in older versions of IE.