Support our Sponsors:

Go Back   Touch Arcade > Developer Discussion > Public Game Developers Forum

 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
  #1  
Old 01-01-2013, 12:40 AM
brand404 brand404 is offline
Junior Member
 
Join Date: Jan 2013
Posts: 1
Default 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: [url]http://boingboing.net23.net/iphone.htm[/url]

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; 01-01-2013 at 12:43 AM..
Reply With Quote

 

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Copyright 2012, TouchArcade.com, LLC.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Copyright 2008 - 2011, TouchArcade.com. Privacy Policy / DMCA Copyright Agent