css - Fix 2 Internet Explorer 7 css bugs

Question

Hi I have a site that I am making for a client and he needs it to work properly on ie7.Most of the site works fine except 2 things.

The first thing I noticed that when I float an ul the list-style disapears and I need them to be floated but also display the list-styles.A work around would be to add images but that could prove problematic because I have 5 ul's and the first one uses decimal list-style , the second upper-latin letters and the other 3 square's and circles.To add an each for each would mean adding an id for each one.

Is there another way?

The second problem can be seen in the image below:

This is the html I am using:

 <label>RADIO BUTTONS</label>
 <input type="radio" value="Male"/>Male<br/>
 <input type="radio" value="Female"/>Female

 <label>CHECKBOXES:</label>
 <input type="checkbox" value="CHECK1"/>CHECK1<br/>
 <input type="checkbox" value="CHECK2"/>CHECK2<br/>

The only css I am using here is display:block to make the labels stay on there own line so this should not affect the text on the right of the input's.

How can I make the text on the right of the input's stay on the same line?

Answer 1

For problem 1 just put the lists in their own containers and float the containers instead of the lists.

For problem two use actual labels for the text labels. For IE7 you'll probably want to float the checkboxes and clear them, but not the labels. I think if you float both the labels and the checkboxes IE7 will screw it up, but you can try it if it doesn't work with just the checkboxes floated