IE7 position absolute width issue

In IE7 the width halts with the above elements width.

[dave_c00]

Hi,

I am having a problem with the width of an element not being true to its size only in IE7.

<ul>
 <li>
 <a href="#" onclick="show_the_below_div();">CLICK</a>
 <div>
 <p>Width needs to be as long as this paragraph is.</p>
 </div>
 </li>
 <li></li>
</ul>

The div is positioned absolutely below the link element but in IE7 it doesn't expand to it's full width whereas in all other browsers it does.

Does anyone know of a hack?

Thanks in advance,

Dave

[rocknbil]

Both a <div> and a <p> are invalid inside a list item. Use a span or a nested <ul>, or another <li>, instead. I don't know that it will work this way, but if it doesn't do what you want it to, you can try setting the span to display:block. Some examples,

<ul>
<li>
<a href="#" onclick="show_the_below_div();">CLICK</a>
<span id="element-to-show">Width needs to be as long as this paragraph is.</span>
</li>
<li></li>
</ul>

<ul>
<li>
<a href="#" onclick="show_the_below_div();">CLICK</a></li>
<li id="element-to-show">Width needs to be as long as this paragraph is.</li>
<li></li>
</ul>

<ul>
<li>
<a href="#" onclick="show_the_below_div();">CLICK</a>
<ul id="element-to-show"><li>Width needs to be as long as this paragraph is.</li></ul>
</li>
<li></li>
</ul>

[dave_c00]

Thanks for the reply. I think I can show the problem better by showing you this example:

[dave.surreywebdesign.co.uk...]

In IE8, Firefox, Safari, Chrome all works fine but in IE7 or compatibility mode the subcategories are cut off..

Most annoying.