Support our Sponsors:

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

Reply
 
Thread Tools Display Modes
  #1  
Old 12-31-2012, 11:40 PM
brand404 brand404 is offline
Junior Member
 
Join Date: Dec 2012
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: 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..
Reply With Quote
  #2  
Old 01-04-2013, 11:57 AM
Patricia Curtis Patricia Curtis is offline
Developer
iPad 2, iOS 5.x
 
Join Date: Jan 2013
Location: Nottingham UK
Posts: 43
Default 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>
Reply With Quote

Reply

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