div inside ul causing problems in IE7

Question

I have a <ul > which contains many lis and divs. The li's are autogenerated from inputs and labels, and the divs are floated right and serve as tooltips to explain each input.

The code is something as follows:

<ul>
  <div>tooltip</div>
  <li>input</li>
  <div>tooltip</div>
  <li>input</li>
  <div>tooltip</div>
  <li>input</li>
</ul>

This works fine in firefox and IE8, but in IE7, it assumes that each div is part of the previous <li >, and completely drops the </li > tags from the interpreted source code (found out from IEtester's View Source Code dev tool). Anyone know why this is happening and how to ammend it?

CSS:

.tooltip { float: right; width: 140px; font-size: 0.9em; padding: 9px 9px 9px 15px; margin-top: 15px; }

Answer 1

You can't have div inside the <ul> directly. They can go inside the <li> elements though. This may or may not help with the problem you're having but should be fixed to make sure it isn't the cause.

<ul>
  <li>input<div>tooltip</div></li>
  <li>input<div>tooltip</div></li>
  <li>input<div>tooltip</div></li>
</ul>