SitePoint Sponsor

User Tag List

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

    When tested in iPhone it has a huge gap between...

    When I tested my client's website in all major browsers it was all right apart from the iPhone 4/4.1, Mobile Safari 4.0.5. In the iPhone, it has a huge gap between mainMenu and h1 span. Can someone please help me solve this problem? Thanks in advance.

    Here is my html:
    HTML Code:
    <div id="header">
    		<ul id="mainMenu">
    			<li><a href="#">Home</a></li>
    			<li><a href="#">Head Stewards</a></li>
    			<li><a href="#">Horse Section Rules &amp; Regulations</a></li>
    			<li><a href="#">Entertainment</a></li>
    			<li><a href="#">Membership</a></li>
    			<li><a href="#">Trade Space</a></li>
    			<li><a href="#">Sponsorship</a></li>
    		</ul>
    		
    		<h1>
    			<span><img alt="header" height="189" src="images/header.jpg" width="887" /></span>
    		</h1>
    </div>
    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  {
    	font: normal 80%/140% Verdana, Arial, Helvetica, sans-serif;
    	text-align: center; /* center #pageWrapper IE 5.x */
    	color: #000;
    	background: #9B9980 url('images/bg.gif') repeat-x;
    }
    
    #header {
    	overflow: hidden;
    	width: 100%;
    	display: block;	
    }
    
    #mainMenu {
    	background: url('images/mainnavbg.gif') no-repeat;
    	width: 890px;
    	list-style: none;
    	padding-top: 5px;
    	padding-bottom: 5px;
    	font-size: 12px;
    }
    
    h1 span {
    	display: block;
    	width:887px;
    	height:189px;	
    }
    
    #mainMenu li {
    	display: inline;
    }
    
    #mainMenu a, #mainMenu a:visited {
    	color: #FFF;
    	text-decoration: none;
    	padding-left: 10px;
    }
    
    #mainMenu a:hover {
    	color: #FFF;
    	text-decoration: none;	
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Maybe try adding the width and height to the h1 instead of the image and remove the span (which seems to be unnecessary anyway).

    As an aside, it would be good to have some text in there for the h1, even if you move it off screen. Even better would be an image replacement technique.

    Otherwise, post a link so we can see this in action.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that information, ralph. With all the messing around with what was in the header div, I decided to do this:
    HTML Code:
    #header {
    	overflow: hidden;
    	width: 890px;
    	display: block;
    	height: 253px;
    }
    
    #header img {
    	display: block;	
    }
    That enabled me to get rid of all gaps within the header div.

    I did try what you said Ralph, as you said I needed to post a link and then I decided to play around with the header div a bit more and came up with the above result. Thanks anyway Ralph I did learn something from you.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by !designer! View Post
    I did learn something from you.
    No worries. An alternative to display: block on the image would be

    Code:
    #header img {
    	vertical-align: bottom;	
    }
    Without that, there would be a gap below the image.


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
  •