On my desktop browser (FF, Safari, Chrome, etc) this code produces two columns of 10 rows. The text font size is the same for both columns. However, when i attempt to view the same page on an iPhone or iPod Touch the 2nd column's text increases in size for some reason. Here is what it looks like on my iPhone and iPod Touch (in Safari Mobile): Here is what it SHOULD look like and does look like on my desktop: Android devices do not have this problem...the page displays normally. You can see the unusual display by pointing your iPhone/iPod Touch to my test page: http://boingboing.net23.net/iphone.htm Here is my code: HTML: <html> <head> <style type="text/css"> * { border: 0 none; font-size: 1em; margin: 0; outline: 0 none; padding: 0; text-decoration: none; vertical-align: baseline; white-space: normal; } .tab1 { margin-top: 10px; width: 100%; } .tab1 ul { float: left; font-weight: bold; margin: 0; padding: 0; width: 33%; } .tab1 ul.c2 { font-weight: normal; width: 67%; } .tab1 ul li { border: 1px solid #A2A2A2; font-size: 1em; list-style: none outside none; margin: 2px 1px; padding: 3px 10px 2px 7px; white-space: nowrap; } ul li.alt { background: none repeat scroll 0 0 #F2F2F2; } </style> </head> <body> <div class="tab1"> <ul> <li>Row 1 Name</li> <li class="alt">Row 2 Name</li> <li>Row 3 Name</li> <li class="alt">Row 4 Name</li> <li>Row 5 Name</li> <li class="alt">Row 6 Name</li> <li>Row 7 Name</li> <li class="alt">Row 8 Name</li> <li>Row 9 Name</li> </ul> <ul class="c2"> <li>Row 1 Description</li> <li class="alt">Row 2 Description</li> <li>Row 3 Description</li> <li class="alt">Row 4 Description</li> <li>Row 5 Description</li> <li class="alt">Row 6 Description</li> <li>Row 7 Description</li> <li class="alt">Row 8 Description</li> <li>Row 9 Description</li> </ul> </div> </body> </html>
Wrong tags Your problem is because your using the wrong HTML tags, <LI list are single list, try <TABLE, or if you know the width <DIV elements, with float left. <div class="tab1" style="width:300px"> <div class="alt" style="width:150px;float:left;">Row 1 Name</div> <div class="alt" style="width:150px;float:left;">Row 1 Description</div> <div class="alt" style="width:150px;float:left;">Row 2 Name</div> <div class="alt" style="width:150px;float:left;">Row 2 Description</div> <div class="alt" style="width:150px;float:left;">Row 3 Name</div> <div class="alt" style="width:150px;float:left;">Row 3 Description</div> <div class="alt" style="width:150px;float:left;">Row 4 Name</div> <div class="alt" style="width:150px;float:left;">Row 4 Description</div> <div class="alt" style="width:150px;float:left;">Row 5 Name</div> <div class="alt" style="width:150px;float:left;">Row 5 Description</div> <div class="alt" style="width:150px;float:left;">Row 6 Name</div> <div class="alt" style="width:150px;float:left;">Row 6 Description</div> <div class="alt" style="width:150px;float:left;">Row 7 Name</div> <div class="alt" style="width:150px;float:left;">Row 7 Description</div> <div class="alt" style="width:150px;float:left;">Row 8 Name</div> <div class="alt" style="width:150px;float:left;">Row 8 Description</div> </div>
