Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE 9 Postion Problem with one page website

    I hope you can help! I'm having problems with IE9 as ever not showing things correctly

    I have created a single page website which uses hyperlinks to go to certain sections of the page. Here is some of the the HTML and CSS:

    Code:
     <div id="header">
        	<div id="nav">
        		
            
              <div id="navagation">
              
              <div id="flash"><img id="image" src="images/nav.png" width="595" height="1" border="0" alt=""></div>
              
        	<div id="room66-01_"><img id="room66_01" src="images/room66_01.png" width="39" height="149" border="0" alt="" /></div>
        	<div id="room66-02_"><a href="#about"><img src="images/room66_02.png" width="104" height="149" border="0" alt="" /></a></div>
        	<div id="room66-03_"><img id="room66_03" src="images/room66_03.png" width="286" height="149" border="0" alt="" /></div>
        	<div id="room66-04_"><img id="room66_04" src="images/room66_04.png" width="595" height="113" alt="" /></div>
        	<div id="room66-05_"><a href="#portfolio" onmouseover="swap('but1','images/room662_05.png')" onmouseout="swap('but1','images/room66_05.png')"><img onmouseover="changeimage('images/nav_over1.png');" onmouseout="changeimage('images/nav.png');" name="but1" src="images/room66_05.png" width="104" height="36" border="0" alt="" /></a></div>
        	<div id="room66-06_"><a href="#contact"><img id="room66_06" src="images/room66_06.png" width="70" height="36" border="0" alt="" /></a></div>
        	<div id="room66-07_"><a href="#work"><img id="room66_07" src="images/room66_07.png" width="86" height="36" border="0" alt="" /></a></div>
        	<div id="room66-08_"><a href="#prices"><img id="room66_08" src="images/room66_08.png" width="59" height="36" border="0" alt="" /></a></div>
        	<div id="room66-09_"><a href="#open"><img id="room66_09" src="images/room66_09.png" width="109" height="36" border="0" alt="" /></a></div>
        	<div id="room66-10_"><a href="#team"><img id="room66_10" src="images/room66_10.png" width="73" height="36" border="0" alt="" /></a></div>
        	<div id="room66-11_"><a href="#location"><img id="room66_11" src="images/room66_11.png" width="94" height="36" border="0" alt="" /></a></div>
        </div>
                
              
                	
        	</div>
        </div>
        
        <div id="page-wrap">
        
        	<div id="page1">
            <a name="about"></a>	
            
            <div id="navspace">
            
            
            
            
            <div id="headertxt">
        		
        	</div>
            
            </div>
          
          
          
        	</div> <!--END Homepage Text page1-->
        	
        	<div id="page2" style="background-image:url(images/about_back.jpg); background-repeat:no-repeat"><a name="portfolio"></a>
                
                <div id="abouttxt">
        		
        	</div>
                
                
            <div id="headertxt2">
        		<p class="caption2">
        			<img src="images/footer.png" width="996" height="48" border="0" alt="" /></p>
        	</div>
            
        		
        	</div> <!--END About Us Text page2-->
        
        	<div id="page3" style="background-image:url(images/gallery.jpg); background-repeat:no-repeat">
        		<a name="contact"></a> 
        		
                
                <div id="headertxt3">
        		<p class="caption3">
        			<img src="images/footer.png" width="996" height="48" border="0" alt="" /></p>
        	</div>
                
                
        	</div> <!--END Gallery Text page3-->
        	
            
            
            
            
        	<div id="page4" style="background-image:url(images/products_back.jpg); background-repeat:no-repeat">
        		<a name="work"></a> 
                
                
                <div id="producttxt">
        		
        	</div>
                
                <div id="headertxt4">
        		<p class="caption4">
        			<img src="images/footer.png" width="996" height="48" border="0" alt="" />
        	</div>
                
                
        	</div> <!--END Product Text page4-->
        	
            
               
        	<div id="page5" style="background-image:url(images/prices_back.jpg); background-repeat:no-repeat">
        		<a name="prices"></a> 
                
                
                <div id="headertxt5">
        		<p class="caption5">
        			<img src="images/footer.png" width="996" height="48" border="0" alt="" />
        	</div>
                
        	</div> <!--END Prices Text page5-->
        	
            
            
            <div id="page6" style="background-image:url(images/open_back.jpg); background-repeat:no-repeat">
        		<a name="open"></a> 
        		
                 <div id="opentimestxt">
        		
        	</div>
                
                
                <div id="headertxt6">
        		<p class="caption">
        			<img src="images/footer.png" width="996" height="48" border="0" alt="" />
        	</div>
            
        	</div> <!--END Opening Times Text page6-->
        	
              
            
            <div id="page7" style="background-image:url(images/team_back.jpg); background-repeat:no-repeat">
        		<a name="team"></a> 
        		
                
                
                <div id="headertxt7">
        		<p class="caption">
        			<img src="images/footer.png" width="996" height="48" border="0" alt="" />
        	</div>
        	</div> <!--END The Team Times Text page7-->
        	
            
            
            <div id="page8" style="background-image:url(images/location_back.jpg); background-repeat:no-repeat">
        		<a name="location"></a> 
        		
                <div id="headertxt8">
        		<p class="caption">
        			<img src="images/footer.png" width="996" height="48" border="0" alt="" />
        	</div>
        	</div> <!--END Location Text page8-->
        	
            
            
        </div> <!--END page-wrap-->
    and the CSS:

    Code:
     body {
        	background:white; 
        	margin: 0;
        	padding:0;
        	float:left;
        	font-family:georgia, times,serif; 
        	background-image:url(../images/back.png);
        	height:3000px;
        	}
        
        #header {
        	position:fixed;
        	top:0px;
        	left:0px;
        	background:#666; 
        	height:0px; 
        	width:100%;
        	}
        
        #nav {
        	margin-left:0px;
        	margin-top:0px;
        	word-spacing:0px;
        }
        
        	
        #page1 {
        	height:1100px;
        	float:left;
        	width:1024px;
        	padding-top:0px;
        	}
        	
        #page2 {
        	height:1100px;
        	float:left;
        	width:1024px;
        	padding-top:0px;
        	}
        	
        #page3 {
        	height:1100px;
        	float:left;
        	width:1024px;
        	padding-top:0px;
        	}
        	
        #page4 {
        	height:1100px;
        	float:left;
        	width:1024px;
        	padding-top:0px;
        	}
        	
        #page5 {
        	height:1100px;
        	float:left;
        	width:1024px;
        	padding-top:0px;
        	}
        	
        #page6 {
        	height:1100px;
        	float:left;
        	width:1024px;
        	padding-top:0px;
        	}
        	
        	
        #page7 {
        	height:1100px;
        	float:left;
        	width:1024px;
        	padding-top:0px;
        	}
        	
        	
        #page8 {
        	height:1500px;
        	float:left;
        	width:1024px;
        	padding-top:0px;
        	}
        	
        .page-padding {height:90px; width:100%;}
        
        a { color:white; text-decoration:none;}
        	
        a:hover { text-decoration:underline;}
        
        
        #navagation {
        	position:absolute;
        	left:0px;
        	top:0px;
        	width:1024px;
        	height:149px;
        	z-index:100000000;

    The problem I'm having is that when it goes to the certain section of the page on IE it has does go to the correct part of the pages, there is about a 10 pixel height before it goes where it is meant too, yet on Chrome, Safari etc etc it works fine, have searched around and can't find anything

    Have tried the merging-top and padding-top but no use.

    Any ideas? Would be much appreciated!!
    Last edited by shibbytude; 08-07-2012 at 04:38 PM.

  • #2
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Silly me! managed to fix it, I liked it to the ID in the first DIV rather that in the ANCHOR tag!

    Works now


  •  

    Posting Permissions

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