SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Content not in right place and text wrong size on Iphone

  1. Dec 10, 2011 10:08 #1
    jackrawles
    jackrawles is offline
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    Code:
    * {
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:
    HTML Code:
    <!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>
    Reply With Quote Reply With Quote
  2. Dec 10, 2011 11:25 #2
    jackrawles
    jackrawles is offline
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Reply With Quote Reply With Quote
  3. Dec 10, 2011 18:02 #3
    markbrown4
    markbrown4 is offline
    padawan silver trophy
     SitePoint Award Recipient markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,014
    Mentioned
    25 Post(s)
    Tagged
    0 Thread(s)
    Hi Jack,

    Welcome

    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?
    --
    twitter | yellowshoe
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules