Hi,
I wonder if you can help?
I have just built a website in HTML5 but I am having problem with IE8 - it’s not possible to scroll down the page. Problematic.
The website can be viewed at www.parsonagehotel.co.uk/spa
Thanks in advance,
Maija
Hi, Welcome to Sitepoint 
I just checked in ietester and the page seems to scroll ok. I also tried in ie9 in ie8 mode and it seems to scroll there also.
Was there a specific page causing the error?
Your conditional comments are wrong which may have something to do with it and they should be like this:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
You need a gap after the IE (if lt IE 9).
Hi,
Thanks for that the change to the conditional comment has worked wonders.
The scrolling is still a problem though on version 8.0.6001.18702 
It would be nice to get the site working on it, but I’m a bit baffled.
Maija
And no, it is all pages in that browser that don’t scroll. It might be a problem with my CSS?
www.parsonagehotel.co.uk/spa/main.css
Hi,
Ok I can see the issue now in IE8 but it is only evindent when the pages is beyond a certain length. I have my browsers half open and the scroll bar shows ok. If I maximise the page I can see the scrollbar disappears.
This appears once again to be the ridiculous notion in html5 that wrapping anchors around block elements is fine. It is not fine and causes many issues.
Set the anchors that wrap your block elements to be display:block and the issue should disappear (although IE will sometimes still get confused in more complicated circumstances).
You can easily first check if this solves the problem by setting all anchors to display:block.
e.g.
a{display:block}
If indeed that does cure the problem as I suspect then remove the global rule and then go through the html and add a class to each anchor that you have used in that manner and set them to display:block.
Also make sure all your html5 elements are also set to display:block.
Ooo that sounds highly likely to work. I will let you know either way. Many thanks!
Such as?
These:
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
Thanks for spelling it out 
I have made the changes. Would you mind checking IE8 for me to see if the scrolling is working now? You’ve been brilliant thank you.
Hi,
Its still not scrolling in IE8 and the problem seems to be here:
#pagebody {
z-index: 2;
position: relative;
margin: 0 auto;
padding: 15px 15px 30px 20px;
[B]top: 415px;[/B]
width: 900px;
}
#home_pagebody {
z-index: 2;
background-color: #1a1d24;
position: relative;
margin: 0 auto;
padding: 15px 15px 30px 20px;
[B]top: 470px;[/B]
width: 869px;
}
You should (almost) never use relative positioning like that to move elements around because relative positioning doesn’t actually move anything at all physically. Relative elements always occupy their position in the flow that they originally occupied. They just look as though they are somewhere else.
IE8 obviously thinks the element is still at the top of the page which is why it only scrolls when the page is small. Use margins to move elements around an not relative positioning.
e.g.
#pagebody {
z-index: 2;
position: relative;
margin: 0 auto;
padding: 15px 15px 30px 20px;
[B]margin-top: 415px;[/B]
width: 900px;
}
#home_pagebody {
z-index: 2;
background-color: #1a1d24;
position: relative;
margin: 0 auto;
padding: 15px 15px 30px 20px;
[B]margin-top: 470px;[/B]
width: 869px;
}
I’ve tested with your code locally and the above does fix the scrolling issue although you may have to tweak the margin a little.
However, it would have been better if you restructured your page so that everything is in the flow and avoid massive margins like that as it is a fragile concept. Just let elements follow each other in the flow logically.
Oo that makes sense too.
I get that.
I almost understand that. I don’t quite know know what you mean by having everything “in the flow”…
The client has a couple of hotels and wants to use this layout as a template, so it’s important to get it ‘just right’ so it doesn’t annoy the *** out of me further down the line!
Any further tips would be welcome, although you have helped me out plenty already!
Hi,
Yes that’s working in IE8 now
What I meant about “flow” was that you absolutely positioned the top section and thus removed it from the flow of the page:
#coverimage {
background-color: #FFFFFF;
height: 500px;
margin-top: 5px;
[B] position: absolute;[/B]
width: 1200px;
z-index: 1;
}
That means to get any content underneath you now have to give it that large margin to clear the absolute element. If the absolute elements height changes at some stage then you have to revise all your margins.
If instead you had simply placed the element in the flow:
#coverimage {
background-color: #FFFFFF;
height: 500px;
margin-top: 5px;
[B] position: relative;[/B]
width: 1200px;
z-index: 1;
}
You would have needed to nothing as the next element will follow underneath irrespective of the height of the element above. It does not matter what height you set the element above to as the content below will just follow on in the flow. You can of course make more space with margins or make things overlap with negative margins but the margins will also relate to the element above and thus never need changing even if the content above changes.
thanks for explaining
Hello again,
I wonder if you can save me some troubleshooting time and tell me why the links inside my <nav> with the ID #main are not working.
I have put phase two of this site build in a temporary location for you to look at, this is what I’ve got so far:
Thanks
M
HI,
The links seem clickable to me and I assume as soon as you put the destination in the href they should work.
<a href="">HOME</a>
Those links would have been better in an unordered list structure and use css rather than non breaking spaces.
That would have been embarrassing if that was all it is! :o
The links seemed to be working fine. The contact link is the only one that is active at the moment.
<a href=“contact.htm”>
I noticed that the logo/crest wasn’t displaying in the box on the left so I uploaded the file.
Then a funny thing happened. The links stopped working. They don’t “hover” they stop acting clickable. And the contact button looses it’s functionality.
Any ideas?
That’s changed now. I must have been looking at an older version.
The problem is that you have given 415px top margin to pagebody which has a higher z-index and therefore even the margin postion of the element will sit on top of lower z-indexes above.
This is the exact problem I mentioned earlier with your use of absolute positioning. You need to put things back in the flow and do them logically.
e.g.
#pagebody{margin-top:-30px}
#coverimage{position:relative}
#membership{top:0}
Add that code and the links will work.
Okay. I had a feeling it was related. I will take out the “absoute”(s) and configure it from there. Thanks.