Radio buttons and <ul>

HTML & CSS
1

Hi,
I have three <ul> which with the use of float are placed side by side. The third <ul> is populated with radio buttons. Everything renders perfectly in netscape7.2 and Firefox, however in i.e. 5.0 5.5 & 6.0 the radio buttons are slightly out of line with the other two lists and in Opera the margins and padding do not render at all (for the radio buttons) The code is like this
CSS:


/*container for the three lists*/

#prod_container {
     position:absolute;
     top:375px;
     left:100px;
     font-size:10pt;
     width:600px;

}

#prod_container ul{
float:left;
list-style:none;
padding:20px 5px 20px 100px;
}

#prod_container li{
padding-bottom:5px;
}


input.radio_prod{
width:10px;
height:10px;
}

and the html that calls it
HTML:


<div id="prod_container">
          <ul>
	  <li>15 oz</li>
	  <li>30 oz</li>
	  <li>60 oz</li>
               <li>15 oz</li>
	  <li>30 oz</li>
	  <li>60 oz</li>
	</ul>

    <ul>
	  <li>£15.00</li>
	  <li>£30.00</li>
	  <li>£50.00</li>
              <li>£15.00</li>
	  <li>£30.00</li>
	  <li>£50.00</li>
	</ul>

    <ul>
	  <li><input name="" type="radio" value="" class="radio_prod" /></li>
	  <li><input name="" type="radio" value="" class="radio_prod" /></li>
	  <li><input name="" type="radio" value="" class="radio_prod" /></li>
              <li><input name="" type="radio" value="" class="radio_prod" /></li>
	  <li><input name="" type="radio" value="" class="radio_prod" /></li>
	  <li><input name="" type="radio" value="" class="radio_prod" /></li>
	</ul>

<br style="clear:both" />
/*I use clear:both as the <ul> use float left and above the <ul>'s I load an image using float:right*/
</div>

So, basically the above doesn’t render properly in i.e or Opera
I will keep searching.
Link is http://www.test2.bcats.com/hacks.html

Cheers
Steve

2

I can’t answer the actual question, but I want to point out that using tables for that area of your page is acceptable, even from an accessibility perspective, because it is in fact displaying organized data. So if your rationale for choosing css instead is anything but a self-imposed challenge, you can opt for a simpler solution this time! :wink:

3

Those radio buttons should also be within a <form>, not a <ul><li>.

4