...

View Full Version : IE 9 Postion Problem with one page website



shibbytude
08-07-2012, 12:29 PM
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:


<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:


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!! :)

shibbytude
08-07-2012, 05:39 PM
Silly me! managed to fix it, I liked it to the ID in the first DIV rather that in the ANCHOR tag!

Works now :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum