SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    iPhone 4 appears with a gap and extra padding, which shouldn't be there

    I have been testing my client's website in iPhone 4/Mobile Safari 4.0.5, and the result was a gap between #mainMenu, #slider and #welcome within #mainWrapper. Every other browser looks like this doesn't appear. Also between #footer and #bottom (it is where #pageWrapper ends), there is extra padding, which shouldn't be there. Here is the website: http://gwydircarapark.com.au/website/. Can someone please help me solve this? Thanks in advance.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please someone, I am at a desperate point now, this the only thing I need to do and then I can hand it over to the client.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well for a faster way of solving these problems, I have decided to add my css, html and an image of the problem here. The image is here: http://i53.tinypic.com/rvd8j5.jpg.

    Here is my css:
    Code:
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img,fieldset {
    	border:none;
    }
    
    body {
    	text-align:center; /* center #pageWrapper IE 5.x */
    	font:normal 80%/140% Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #032539;
    }
    
    #pageWrapper {
    	width:850px;
    	margin:0 auto;
    	text-align:left;
    	overflow:hidden;
    	background: #FFF;
    	margin-bottom: 0;
    }
    
    /* the first problem */
    
    #mainWrapper {	
    	overflow: hidden;
    	display: block;
    	width: 850px;
    	height: 432px;
    	margin-bottom: 1em;
    }
    
    #mainWrapper img {
    	display: block;
    	vertical-align: top;
    }
    
    #mainMenu {
    	list-style: none;
    	background: url('images/navbar.gif') no-repeat;
    	width: 850px;
    	padding: 10px;
    }
    
    #mainMenu li {
    	display: inline;
    }
    
    #mainMenu a, #mainMenu a:visited {
    	color: #FFF;
    	text-decoration: none;
    	margin-left: 20px;	
    }
    
    #mainMenu a:hover {
    	color: #FFF;
    	text-decoration: underline;
    	margin-left: 20px;	
    }
    
    #slider {
    	float: left;
    	width: 558px;
    	background: #719fba;
    }
    
    #welcome {
    	float: right;
    	width: 292px;
    	color: #FFF;
    	background: #265B8E;
    	padding-top: 25px;
    	line-height: 27px;
    	margin-bottom: 1em;
    	vertical-align: top;
    }
    
    #welcome p {
    	margin-bottom: 1em;
    	padding-left: 12px;
    	margin-top: 16px;
    	font-size: 14px;
    	margin-right: 6px;
    }
    
    /* the second problem */
    
    #footer {
    	background: url('images/footerbg.gif') no-repeat;
    	padding: 10px;
    	text-align: center;
    	width: 100%;
    }
    
    #bottomMenu {
    	list-style: none;
    }
    
    #bottomMenu li {
    	display: inline;
    }
    
    #bottomMenu a {
    	color: #2B6394;
    	margin-left: 20px;
    	text-decoration: none;	
    }
    
    #bottomMenu a:visited {
    	color: #719FBA;
    	margin-left: 20px;
    	text-decoration: none;
    }
    
    #bottomMenu a:hover {
    	text-decoration: underline;
    	margin-left: 20px;
    	color: #2B6394;
    }
    
    #bottom {
    	margin-top: 10px;	
    }
    
    #bottom p {
    	margin-bottom: 1em;
    	color: #FFF;
    }
    
    #bottom a {
    	color: #FFF;
    	text-decoration: none;
    }
    
    #bottom a:visited {
    	text-decoration: none;
    	color: #CCC;
    }
    
    #bottom a:hover {
    	text-decoration: underline;
    }
    Here is my html.

    The first problem:
    HTML Code:
    <div id=pageWrapper">
    <div id="mainWrapper">
    	<ul id="mainMenu">
    		<?php wp_page_menu('exclude=7'); ?>
    	</ul>
    
    <div id="slider">
    	<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
    </div>
    
    <div id="welcome">
    	<h1>Welcome</h1>
    	<?php
      	$home_page_post_id = 7;
      	$home_page_post = get_post( $home_page_post_id, ARRAY_A );
      	$content_home = $home_page_post['post_content'];
      	echo $content_home;
    	?>
    </div>
    </div>
    The second problem:
    HTML Code:
    <div id="footer">
    		<ul id="bottomMenu">
    			<?php wp_page_menu('exclude=7'); ?>
    		</ul>
    	</div>
    </div>
    
    <div id="bottom">
    	<p>Copyright Gwydir Carapark &amp; Thermal Pools. All rights reserved.</p>
    </div>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Try this:

    Code:
    #footer,#mainMenu{-webkit-background-size:100%;}
    The iphone has trouble with repeating background images when it scales to fit.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Paul. That fixed it.


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
  •