★ TouchArcade needs your help. Click here to support us on Patreon.

BUG In iOS Safari Browser Found?? Why does this simple webpage do this?

Prev Previous Post   Next Post Next
12-31-2012, 11:40 PM
#1
BUG In iOS Safari Browser Found?? Why does this simple webpage do this?

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 Code:
<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>

Last edited by brand404; 12-31-2012 at 11:43 PM.