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

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

12-31-2012, 11:40 PM
#1
Joined: Dec 2012
Posts: 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.
01-04-2013, 11:57 AM
#2
Joined: Jan 2013
Location: Nottingham UK
Posts: 43
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>

Game development blog luckyredfish.com