Content not in right place and text wrong size on Iphone

Hey guys,

Im new here and this is my first post. I have just changed from my old table way of designing websites and now use CSS and Divs. However, im having a little trouble. On a computer my website looks great but when it comes to the iPhone some elements go wrong.

The site is www.jacwilliampriestland.co.uk (the url is just for me to test sites before putting them live).

Everything looks fine on a computer, but when you check it on an iphone the “body-text” is larger and the “footer” div alignment is all messy.

If anyone has any suggestions, on any of the HTML or CSS that would be great. The problem is driving me crazy!

Thanks in advance everyone,

Jack.

CSS:

* {
margin: 0;
}

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6, body-text {
    -webkit-text-size-adjust: auto;  
}

html {
	height: 100%;
	overflow-y: scroll;
}

body {
	height: 100%;
	background-color: #9A0A18;
}

#container {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
	box-shadow: 7px 5px 10px -7px #000000, -7px 5px 10px -7px #000000;
	-webkit-box-shadow: 7px 5px 10px -7px #000000, -7px 5px 10px -7px #000000;
	-moz-box-shadow: 7px 5px 10px -7px #000000, -7px 5px 10px -7px #000000;
}

#header {
	width: 800px;
	background-color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
}

#logo {
	margin-top: 20px;
	margin-left: 25px;
	margin-bottom: 6px;
}

#nnhbc {
	margin-left: 366px;
	margin-top: 20px;
	margin-bottom: 6px;
}

#fmb {
	margin-left: 10px;
	margin-top: 20px;
	margin-bottom: 6px;
}

#links {
	width: 750px;
	height: 30px;
	background-color: #666666;
	margin-left: auto;
	margin-right: auto;
}

#nav {
	margin: 0;
	padding: 0;
	float: right;
	padding-top: 3px;
}

#nav li {
	display: inline;
	padding: 0;
	margin: 0;
}

#nav a:link {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 18px;
	text-decoration: none;
	color: #D2D2D2;
	padding-right: 25px;
}

#nav a:active {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 18px;
	text-decoration: none;
	color: #D2D2D2;
	padding-right: 25px;
}

#nav a:visited {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 18px;
	text-decoration: none;
	color: #D2D2D2;
	padding-right: 25px;
}

#nav a:hover {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 18px;
	text-decoration: none;
	color: #FFFFFF;
	padding-right: 25px;
}

#content {
	position: relative;
	width: 800px;
	background-color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
}

#thumbs {
	padding-left: 25px;
	padding-right: 25px;
}

#left-thumb{
	padding-bottom: 12.5px;
}

#left-thumb:hover{
	opacity:0.4;
	filter:alpha(opacity=40);
}

#other-thumb{
	padding-bottom: 12.5px;
	margin-left: 12.5px;
}

#other-thumb:hover{
	opacity:0.4;
	filter:alpha(opacity=40);
}

#main-img {
	margin-left: 25px;
	margin-top: 10px;
}

h1 {
	font-family: "Helvetica Inserat LT Std", "Arial Narrow", Arial;
	font-size: 50px;
	color: #B50B1C;
	margin-left: 25px;
	margin-top: 6px;
	margin-bottom: 3px;
}

h2 {
	font-family: "Helvetica Inserat LT Std", "Arial Narrow", Arial;
	font-size: 30px;
	color: #B50B1C;
	margin-left: 25px;
	margin-top: 6px;
	margin-bottom: 3px;
}

P {
}

.body-text {
	margin-left: 25px;
	margin-right: 25px;
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 20px;
	font-weight:;
	color: #666666;
	line-height: 1.5;
}

.contact-email-hover {
	text-decoration: none;
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 20px;
	color: #666666;
	line-height: 1.5;
}

.contact-email-hover a:link {
	text-decoration: none;
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 20px;
	color: #666666;
	line-height: 1.5;
}

.contact-email-hover a:active {
	text-decoration: none;
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 20px;
	color: #666666;
	line-height: 1.5;
}

.contact-email-hover a:visited {
	text-decoration: none;
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 20px;
	color: #666666;
	line-height: 1.5;
}

.contact-email-hover a:hover {
	text-decoration: none;
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 20px;
	color: #B50B1C;
	line-height: 1.5;
}

#residential-and-commercial {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 20px;
	font-weight:;
	color: #000000;
}

#dark-text {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 20px;
	color: #000000;
}

#dark-text a:link {
	text-decoration: none;
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 20px;
	color: #000000;
}

#dark-text a:active {
	text-decoration: none;
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 20px;
	color: #000000;
}

#dark-text a:visited {
	text-decoration: none;
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 20px;
	color: #000000;
}

#dark-text a:hover {
	text-decoration: none;
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 20px;
	color: #B50B1C;
}

#nhbc {
	margin-bottom:10px;
	text-align: center;
}

#image-links {
	position: relative;
	width: 800px;
	background-color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
}

#index-box {
	width: 800px;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	z-index: 1;
}

#index-box-text {
	position: absolute;
	top: 180px;
	width: 225px;
	left: 32px;
	z-index: 2;
}

#index-box-text a:link {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	color: #666666;
	text-decoration: none;
}

#index-box-text a:active {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	color: #666666;
	text-decoration: none;
}

#index-box-text a:visited {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	color: #666666;
	text-decoration: none;
}

#index-box-text a:hover {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	color: #666666;
	text-decoration: none;
}

#index-box-text-2 {
	position: absolute;
	margin-top:;
	top: 180px;
	width: 225px;
	left: 288px;
	z-index: 2;
}

#index-box-text-2 a:link {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	color: #666666;
	text-decoration: none;
}

#index-box-text-2 a:active {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	color: #666666;
	text-decoration: none;
}

#index-box-text-2 a:visited {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	color: #666666;
	text-decoration: none;
}

#index-box-text-2 a:hover {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	color: #666666;
	text-decoration: none;
}

#index-box-text-3 {
	position: absolute;
	margin-top:;
	top: 180px;
	width: 225px;
	left: 543px;
	z-index: 2;
}

#index-box-text-3 a:link {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	color: #666666;
	text-decoration: none;
}

#index-box-text-3 a:active {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	color: #666666;
	text-decoration: none;
}

#index-box-text-3 a:visited {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	color: #666666;
	text-decoration: none;
}

#index-box-text-3 a:hover {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	color: #666666;
	text-decoration: none;
}

.index-box-text-p {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	text-decoration: underline;
}

#footer {
	position: relative;
	width: 800px;
	height: 50px;
	background-color: #D6D6D6;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#nav2 {
	padding-top: 14px;
	padding-left: 25px;
}

#nav2 li {
	display: inline;
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	font-weight:;
	color: #5D5D5D;
	padding-right: 22px;
	padding-left: 22px;
}

#nav2-email {
}

#nav2-email a:link {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	text-decoration: none;
	padding-right: 25px;
	color: #5D5D5D;
}

#nav2-email a:active {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	text-decoration: none;
	padding-right: 25px;
	color: #5D5D5D;
}

#nav2-email a:visited {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	text-decoration: none;
	padding-right: 25px;
	color: #5D5D5D;
}

#nav2-email a:hover {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	text-decoration: none;
	padding-right: 25px;
	color: #B50B1C;
}

#nav2-iBuild {
}

#nav2-iBuild a:link {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	text-decoration: none;
	color: #5D5D5D;
}

#nav2-iBuild a:active {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	text-decoration: none;
	color: #5D5D5D;
}

#nav2-iBuild a:visited {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	text-decoration: none;
	color: #5D5D5D;
}

#nav2-iBuild a:hover {
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 16px;
	text-decoration: none;
	color: #B50B1C;
}

#services {
	margin-bottom: 15px;
}

#services-list {
	margin: 0;
	padding: 0;
	padding-top: 14px;
	padding-left: 100px;
}

#services-list li {
	padding: 0;
	margin: 0;
	font-family: "Arial Narrow", Arial, "Helvetica LT Std Black", sans-serif;
	font-size: 20px;
	color: #666666;
}

#paragraph {
	margin-bottom: 10px;
}

#jarzon {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #D2D2D2;
	text-align: center;
	margin-top: 10px;
	padding-bottom: 10px;
	text-decoration: none;
}

#jarzon a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #D2D2D2;
	text-align: center;
	margin-top: 10px;
	padding-bottom: 10px;
	text-decoration: none;
}

#jarzon a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #D2D2D2;
	text-align: center;
	margin-top: 10px;
	padding-bottom: 10px;
	text-decoration: none;
}

#jarzon a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #D2D2D2;
	text-align: center;
	margin-top: 10px;
	padding-bottom: 10px;
	text-decoration: none;
}

#jarzon a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	text-align: center;
	margin-top: 10px;
	padding-bottom: 10px;
	text-decoration: none;
}

.anylinkmenu {
	position: absolute;
	text-decoration: none;
	left: 0;
	top: 0;
	visibility: hidden;
	border-top: 1px solid #8D8D8D;
	border-left: 0;
	border-right: 0;
	margin-top: 5px;
	font-family: "Arial Narrow", Arial, "Helvetica Inserat LT Std", sans-serif;
	font-size: 18px;
	line-height: 25px;
	z-index: 100;
	background: #838383;
	width: 160px;
}

.anylinkmenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #D2D2D2;
}

.anylinkmenu ul li a {
	width: 100%;
	display: block;
	border-bottom: 1px solid #8D8D8D;
	padding-bottom: 5px;
	text-decoration: none;
	font-family: "Arial Narrow", Arial, "Helvetica Inserat LT Std", sans-serif;
	font-size: 18px;
	color: #D2D2D2;
	text-indent: 15px;
}

.anylinkmenu a:hover {
	color: white;
}

.anylinkshadow{
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 99;
	background: black;
	visibility: hidden;
}

HTML:

<!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>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content "width=device-width">
<meta name="description" content="iBuild Wales - Building and Carpentry" />
<meta name="keywords" content="iBuild, iBuild Wales, Building, Carpentry, Worktops, Building and Carpentry, Corian, Corian Worktops, Carmarthen, Carmarthenshire, Laugharne, Ian James, Meirion Evans" />
<meta name="author" content="Jack Rawles" />
<meta name="owner" content="iBuild" />
<title>iBuild Wales - Building and Carpentry</title>

<script type="text/javascript" src="js/menucontents.js"></script>

<script type="text/javascript" src="js/anylinkmenu.js"></script>

<script type="text/javascript">anylinkmenu.init("menuanchorclass")</script>

</head>

<body>
<div id="container">
    
    	<div id="header">
        	<div>
            <a href="index.html"><img src="logo2.gif" name="logo" border="0" id="logo" /></a><a href="http://www.nhbc.co.uk/" target="_blank"><img src="nhbcsmaller.gif" border="0" id="nnhbc" /></a><a href="http://www.fmb.org.uk/" target="_blank"><img src="fmbsmall.gif" name="fmb" border="0" id="fmb" /></a>
            </div>
        	<div id="links">
       	 		 <ul id="nav">
					<li id="nav-about"><a href="about.html">About</a></li>
					<li id="nav-services"><a href="services.html">Services</a></li>
					<li id="nav-gallery"><a href="#" class="menuanchorclass" rel="anylinkmenu1[click]">Gallery</a></li>
					<li id="nav-corian"><a href="corian.html">Corian&reg;</a></li>
			  		<li id="nav-contact"><a href="contact.html">Contact</a></li>
				</ul>
        	</div>
        </div>
        
   	  <div id="content">
        	<div>
            <img src="main-img.jpg" border="0" id="main-img" />
            </div>
       	 		<div>
            	<h1>Building and Carpentry.</h1>
        		<p class="body-text"><span id="dark-text">iBuild Wales</span> have a wide customer base and cover the West Wales area. The jobs vary from small jobs of just fixing a loose slate to a large new build or renovation including both <span id="dark-text">residential and commercial.</span> iBuild are members of both <span id="dark-text"><a href="http://www.nhbc.co.uk/" target="_blank">NHBC</a></span> and <span id="dark-text"><a href="http://www.fmb.org.uk/" target="_blank">FMB</a></span>, whose advice and service has been always of great value over the years.</p>
				</div>
		</div>
        
      <div id="image-links">        
          <div id="index-box">
            <a href="services.html"><img src="indexbox1.jpg" border="0" /></a>
            <a href="generalgallery.html"><img src="indexbox2.jpg" border="0" /></a>
            <a href="contact.html"><img src="indexbox3.jpg" border="0" /></a>   
            </div>
       	  <div id="index-box-text">
          	<a href="services.html">
            <p class="index-box-text-p">What we offer</p>
            <p class="index-box-text-p-2">We provide a range of services, from building and plastering to kitchen fitting.</p>
            </a>
          </div>
          <div id="index-box-text-2">
          <a href="generalgallery.html">
            <p class="index-box-text-p">View the photo gallery</p>
            <p class="index-box-text-p-2">Have a look at our photo gallery to see what we can do and what we have done.</p>
            </a>
          </div>
        <div id="index-box-text-3">
          <a href="contact.html">
          <p class="index-box-text-p">Get in touch</p>
          <p class="index-box-text-p-2">We can answer any questions or provide a free, no obligation estimate for the job you need.</p>
          </a>
        </div>
				 
   	</div>
              
    	<div id="footer">
				<ul id="nav2">
						<li id="nav2-iBuild"><a href="index.html">iBuild Wales</a></li>
						<li id="nav2-phone">phone - 01994 427 842</li>
						<li id="nav2-mobile">mobile - 07971 217 033</li>
						<li id="nav2-email"><a href="mailto:redvanman@btinternet.com">email - redvanman@btinternet.com</a></li>
				</ul>
    	</div>
    </div>
    
    <div id="jarzon">Website designed by <a href="http://www.jarzonwebdesign.co.uk" target="_blank">Jarzon Web Design</a>
    </div>
    
</body>
</html>

A quick update. I have added -webkit-text-size-adjust:none; to all of the css where I have used fonts and it has helped to some extenet. The font is smaller but not quite the same size. But it will do for now.

I am just stumped by the footer now. thanks guys :smiley:

Hi Jack,

Welcome :slight_smile:

The site looks the same in Firefox / Safari & on my iPhone 4. It’s possible you’re looking at it in an older version of Safari?