#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    4
    Rep Power
    0

    [Solved] IE CSS Postion problem with a one page website


    Hi all!!

    I hope you can help! I'm having problems with IE9 as ever not showing things correctly been doing all sorts and can't fix it

    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!!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    4
    Rep Power
    0
    Silly me! managed to fix it, I liked it to the ID in the first DIV rather that in the ANCHOR tag!

    Works now

IMN logo majestic logo threadwatch logo seochat tools logo