Position is off when viewing this page on my iphone

xerox02 · July 22, 2010

When I view this part of my website on my iphone http://excusesexcuses.net/excuses.php

the (id) positioning is off, and the (submitted by) positioning is off. How can I fix this?

This is extra, but when I view my home page of my website on internet explorer, it looks crazy. Is that normal? I've heard IE is just outdated.

Thanks a lot,

Xerox02

xerox02 · July 22, 2010

bump

joePHP · July 23, 2010

Hi,

I don't have an iPhone but I fixed the HTML so it should be valid and I think it may help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- STEP ONE: Insert this code into the HEAD section of your HTML document  -->

<script type="text/javascript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://excusesexcuses.net/images/Untitled-2.gif";
staticImage1 = new Image();
staticImage1.src = "http://img830.imageshack.us/img830/4638/27672655.gif";

loadImage2 = new Image();
loadImage2.src = "http://excusesexcuses.net/images/Financial2.gif";
staticImage2 = new Image();
staticImage2.src = "http://excusesexcuses.net/images/Financial.gif";

loadImage3 = new Image();
loadImage3.src = "http://excusesexcuses.net/images/school2.gif";
staticImage3 = new Image();
staticImage3.src = "http://excusesexcuses.net/images/school1.gif";

loadImage4 = new Image();
loadImage4.src = "http://excusesexcuses.net/images/ab1.gif";
staticImage4 = new Image();
staticImage4.src = "http://excusesexcuses.net/images/ab2.gif";

loadImage5 = new Image();
loadImage5.src = "http://excusesexcuses.net/images/humor1.gif";
staticImage5 = new Image();
staticImage5.src = "http://excusesexcuses.net/images/humor2.gif";

loadImage6 = new Image();
loadImage6.src = "http://excusesexcuses.net/images/common1.gif";
staticImage6 = new Image();
staticImage6.src = "http://excusesexcuses.net/images/common2.gif";

loadImage7 = new Image();
loadImage7.src = "http://excusesexcuses.net/images/unique1.gif";
staticImage7 = new Image();
staticImage7.src = "http://excusesexcuses.net/images/unique2.gif";

loadImage8 = new Image();
loadImage8.src = "http://excusesexcuses.net/images/all1.gif";
staticImage8 = new Image();
staticImage8.src = "http://excusesexcuses.net/images/all2.gif";



// End -->
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Excuses Excuses</title>
<style type="text/css">
#container 
{
height: 668px;
width: 857px;
background-image: url(http://excusesexcuses.net/images/all.gif);
background-repeat: no-repeat;	
margin: 0 auto;
}

#wrapper 
{
height: 745px;
width: 900px;
margin: 0 auto;
}

#links 
{
height: 30px;
width: 715px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 12px;	
}

#links1 
{
height: 50px;
width: 82px;
float: left;
text-align: center;
}

#links2 
{
height: 50px;
width: 153px;
float: left;
text-align: center;
}

#links3 
{
height: 50px;
width: 173px;
float: left;
text-align: center;
}

#links4 
{
height: 50px;
width: 168px;
float: left;
text-align: center;
}

#links5 
{
height: 50px;
width: 137px;
float: left;
text-align: center;
}

.section 
{
height: 167px;
width:  857px;
}

.subsection1 
{
font-family: "Arial Black", Gadget, sans-serif;
color: #FFF;	
padding: 71px 0 0 155px;
}

.subsection 
{
font-family: "Arial Black", Gadget, sans-serif;
color: #FFF;	
padding-top: 48px;
}

.sub_id
{
padding-left: 185px;	
}

.sub_by
{
padding-left: 460px;	
}

#page
{
height: 24px;
overflow: auto;
}

#sub_page
{
float: right;
}


</style>
</head>

<body>
<div id="wrapper">
<div id="container">
	<div class="section">
		<div class="subsection1">
			My dog ate my hw
		</div>
		<div class="subsection">
			<span class="sub_id">1</span>
			<span class="sub_by">anonymous</span>
		</div>
	</div>
	<div class="section">
		<div class="subsection1">
			I had to go to court today
		</div>
		<div class="subsection">
			<span class="sub_id">2</span>
			<span class="sub_by">anonymous</span>	
		</div>
	</div>
	<div class="section">
		<div class="subsection1">
			I had chores to do today
		</div>
		<div class="subsection">
			<span class="sub_id">3</span>	 
			<span class="sub_by">anonymous</span>		
		</div>	
	</div>
	<div class="section">
		<div class="subsection1">
			I had to pick up a (person of importance) from
		</div>
		<div class="subsection">
			<span class="sub_id">4</span>	
			<span class="sub_by">anonymous</span>		
		</div>
	</div>
	<div id="page">
		<div id="sub_page">
			[<b>1</b>]
			<a href='/excuses.php?currentpage=2'>2</a>  
			<a href='/excuses.php?currentpage=2'>&#62;</a>
			<a href='/excuses.php?currentpage=2'>&#62;&#62;</a> 
		</div>
	</div>

	<div class="buttons">
		<a href="http://excusesexcuses.net/tardiness.php" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
		<img name="image1" src="http://img830.imageshack.us/img830/4638/27672655.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/fiscal.php" onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
		<img name="image2" src="http://excusesexcuses.net/images/Financial.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/school.php" onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">
		<img name="image3" src="http://excusesexcuses.net/images/school1.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/absense.php" onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">
		<img name="image4" src="http://excusesexcuses.net/images/ab2.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/humor.php" onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;">
		<img name="image5" src="http://excusesexcuses.net/images/humor2.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/common.php" onmouseover="image6.src=loadImage6.src;" onmouseout="image6.src=staticImage6.src;">
		<img name="image6" src="http://excusesexcuses.net/images/common2.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/unique.php" onmouseover="image7.src=loadImage7.src;" onmouseout="image7.src=staticImage7.src;">
		<img name="image7" src="http://excusesexcuses.net/images/unique2.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/excuses.php" onmouseover="image8.src=loadImage8.src;" onmouseout="image8.src=staticImage8.src;">
		<img name="image8" src="http://excusesexcuses.net/images/all2.gif" border="0" alt="" /></a>
	</div>

	<div id="links">
		<div id="links1"><a href="http://excusesexcuses.net"><img src="http://kian02.comlu.com/images/test.png" vspace="14" border="0" alt="" /></a></div>
		<div id="links2"><a href="http://excusesexcuses.net/excuses.php"><img src="http://kian02.comlu.com/images/test2.png" vspace="16" border="0" alt="" /></a></div>
		<div id="links3"><a href="http://excusesexcuses.net/submit1.php"><img src="http://kian02.comlu.com/images/submit.png" vspace="16" border="0" alt="" /></a></div>
		<div id="links4"><a href="http://excusesexcuses.net/suggestion.php"><img src="http://kian02.comlu.com/images/suggest.png" vspace="16" border="0" alt="" /></a></div>
		<div id="links5"><a href="http://excusesexcuses.net/contactus.php"><img src="http://kian02.comlu.com/images/contactus.png" vspace="16" border="0" alt="" /></a></div>
	</div>
</div>    
</div>
<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript>
<a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a>
</noscript>
<!-- End Of Analytics Code -->
</body>
</html>

Btw, really cool website!

I hope this helps,

Joe

xerox02 · July 23, 2010

Hi,

I don't have an iPhone but I fixed the HTML so it should be valid and I think it may help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- STEP ONE: Insert this code into the HEAD section of your HTML document  -->

<script type="text/javascript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://excusesexcuses.net/images/Untitled-2.gif";
staticImage1 = new Image();
staticImage1.src = "http://img830.imageshack.us/img830/4638/27672655.gif";

loadImage2 = new Image();
loadImage2.src = "http://excusesexcuses.net/images/Financial2.gif";
staticImage2 = new Image();
staticImage2.src = "http://excusesexcuses.net/images/Financial.gif";

loadImage3 = new Image();
loadImage3.src = "http://excusesexcuses.net/images/school2.gif";
staticImage3 = new Image();
staticImage3.src = "http://excusesexcuses.net/images/school1.gif";

loadImage4 = new Image();
loadImage4.src = "http://excusesexcuses.net/images/ab1.gif";
staticImage4 = new Image();
staticImage4.src = "http://excusesexcuses.net/images/ab2.gif";

loadImage5 = new Image();
loadImage5.src = "http://excusesexcuses.net/images/humor1.gif";
staticImage5 = new Image();
staticImage5.src = "http://excusesexcuses.net/images/humor2.gif";

loadImage6 = new Image();
loadImage6.src = "http://excusesexcuses.net/images/common1.gif";
staticImage6 = new Image();
staticImage6.src = "http://excusesexcuses.net/images/common2.gif";

loadImage7 = new Image();
loadImage7.src = "http://excusesexcuses.net/images/unique1.gif";
staticImage7 = new Image();
staticImage7.src = "http://excusesexcuses.net/images/unique2.gif";

loadImage8 = new Image();
loadImage8.src = "http://excusesexcuses.net/images/all1.gif";
staticImage8 = new Image();
staticImage8.src = "http://excusesexcuses.net/images/all2.gif";



// End -->
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Excuses Excuses</title>
<style type="text/css">
#container 
{
height: 668px;
width: 857px;
background-image: url(http://excusesexcuses.net/images/all.gif);
background-repeat: no-repeat;	
margin: 0 auto;
}

#wrapper 
{
height: 745px;
width: 900px;
margin: 0 auto;
}

#links 
{
height: 30px;
width: 715px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 12px;	
}

#links1 
{
height: 50px;
width: 82px;
float: left;
text-align: center;
}

#links2 
{
height: 50px;
width: 153px;
float: left;
text-align: center;
}

#links3 
{
height: 50px;
width: 173px;
float: left;
text-align: center;
}

#links4 
{
height: 50px;
width: 168px;
float: left;
text-align: center;
}

#links5 
{
height: 50px;
width: 137px;
float: left;
text-align: center;
}

.section 
{
height: 167px;
width:  857px;
}

.subsection1 
{
font-family: "Arial Black", Gadget, sans-serif;
color: #FFF;	
padding: 71px 0 0 155px;
}

.subsection 
{
font-family: "Arial Black", Gadget, sans-serif;
color: #FFF;	
padding-top: 48px;
}

.sub_id
{
padding-left: 185px;	
}

.sub_by
{
padding-left: 460px;	
}

#page
{
height: 24px;
overflow: auto;
}

#sub_page
{
float: right;
}


</style>
</head>

<body>
<div id="wrapper">
<div id="container">
	<div class="section">
		<div class="subsection1">
			My dog ate my hw
		</div>
		<div class="subsection">
			<span class="sub_id">1</span>
			<span class="sub_by">anonymous</span>
		</div>
	</div>
	<div class="section">
		<div class="subsection1">
			I had to go to court today
		</div>
		<div class="subsection">
			<span class="sub_id">2</span>
			<span class="sub_by">anonymous</span>	
		</div>
	</div>
	<div class="section">
		<div class="subsection1">
			I had chores to do today
		</div>
		<div class="subsection">
			<span class="sub_id">3</span>	 
			<span class="sub_by">anonymous</span>		
		</div>	
	</div>
	<div class="section">
		<div class="subsection1">
			I had to pick up a (person of importance) from
		</div>
		<div class="subsection">
			<span class="sub_id">4</span>	
			<span class="sub_by">anonymous</span>		
		</div>
	</div>
	<div id="page">
		<div id="sub_page">
			[<b>1</b>]
			<a href='/excuses.php?currentpage=2'>2</a>  
			<a href='/excuses.php?currentpage=2'>&#62;</a>
			<a href='/excuses.php?currentpage=2'>&#62;&#62;</a> 
		</div>
	</div>

	<div class="buttons">
		<a href="http://excusesexcuses.net/tardiness.php" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
		<img name="image1" src="http://img830.imageshack.us/img830/4638/27672655.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/fiscal.php" onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
		<img name="image2" src="http://excusesexcuses.net/images/Financial.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/school.php" onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">
		<img name="image3" src="http://excusesexcuses.net/images/school1.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/absense.php" onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">
		<img name="image4" src="http://excusesexcuses.net/images/ab2.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/humor.php" onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;">
		<img name="image5" src="http://excusesexcuses.net/images/humor2.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/common.php" onmouseover="image6.src=loadImage6.src;" onmouseout="image6.src=staticImage6.src;">
		<img name="image6" src="http://excusesexcuses.net/images/common2.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/unique.php" onmouseover="image7.src=loadImage7.src;" onmouseout="image7.src=staticImage7.src;">
		<img name="image7" src="http://excusesexcuses.net/images/unique2.gif" border="0" alt="" /></a>

		<a href="http://excusesexcuses.net/excuses.php" onmouseover="image8.src=loadImage8.src;" onmouseout="image8.src=staticImage8.src;">
		<img name="image8" src="http://excusesexcuses.net/images/all2.gif" border="0" alt="" /></a>
	</div>

	<div id="links">
		<div id="links1"><a href="http://excusesexcuses.net"><img src="http://kian02.comlu.com/images/test.png" vspace="14" border="0" alt="" /></a></div>
		<div id="links2"><a href="http://excusesexcuses.net/excuses.php"><img src="http://kian02.comlu.com/images/test2.png" vspace="16" border="0" alt="" /></a></div>
		<div id="links3"><a href="http://excusesexcuses.net/submit1.php"><img src="http://kian02.comlu.com/images/submit.png" vspace="16" border="0" alt="" /></a></div>
		<div id="links4"><a href="http://excusesexcuses.net/suggestion.php"><img src="http://kian02.comlu.com/images/suggest.png" vspace="16" border="0" alt="" /></a></div>
		<div id="links5"><a href="http://excusesexcuses.net/contactus.php"><img src="http://kian02.comlu.com/images/contactus.png" vspace="16" border="0" alt="" /></a></div>
	</div>
</div>    
</div>
<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript>
<a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a>
</noscript>
<!-- End Of Analytics Code -->
</body>
</html>

Btw, really cool website!

I hope this helps,

Joe

Thanks a lot man!!! I appreciate this. It's perfect, but it needs to lowered 3-5 px.

Pikachu2000 · July 23, 2010

It doesn't look at all right in Safari 5 (full version) . . . Do you want a screenshot so you can see what I mean?

xerox02 · July 23, 2010

It doesn't look at all right in Safari 5 (full version) . . . Do you want a screenshot so you can see what I mean?

Yeah, show me man. What can I do to fix it!!!!!

Pikachu2000 · July 23, 2010

Ok. Here it is. The things I noticed are the text fields for ID and Submitted By, the values seem to float above and to the left of where they (probably) should be. Also, the buttons along the bottom, I'm not sure if you designed them to be in two rows or not, but that's how they rendered in my browser, so that may or may not be a problem.

[attachment deleted by admin]

xerox02 · July 23, 2010

I insert HTML space code &nbsp and that's what seems to be messing it up.

Sign In

Position is off when viewing this page on my iphone

Recommended Posts

xerox02

Link to comment

Share on other sites

xerox02

Link to comment

Share on other sites

joePHP

Link to comment

Share on other sites

xerox02

Link to comment

Share on other sites

Pikachu2000

Link to comment

Share on other sites

xerox02

Link to comment

Share on other sites

Pikachu2000

Link to comment

Share on other sites

xerox02

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information