SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE8 not 'scrolling down' my HTML5 webpages

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    	<!--[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).

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooo that sounds highly likely to work. I will let you know either way. Many thanks!

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Also make sure all your html5 elements are also set to display:block.
    Such as?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Maija Liepins View Post
    Such as?
    These:
    Code:
    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section { 
        display:block;
    }

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for spelling it out

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its still not scrolling in IE8 and the problem seems to be here:

    Code:
    #pagebody {
    	z-index: 2;
    	position: relative;
    	margin: 0 auto;
    	padding: 15px 15px 30px 20px;
    	top: 415px;
    	width: 900px;
    }
    #home_pagebody {
    	z-index: 2;
    	background-color: #1a1d24;
    	position: relative;
    	margin: 0 auto;
    	padding: 15px 15px 30px 20px;
    	top: 470px;
    	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.

    Code:
    #pagebody {
    	z-index: 2;
    	position: relative;
    	margin: 0 auto;
    	padding: 15px 15px 30px 20px;
    	margin-top: 415px;
    	width: 900px;
    }
    #home_pagebody {
    	z-index: 2;
    	background-color: #1a1d24;
    	position: relative;
    	margin: 0 auto;
    	padding: 15px 15px 30px 20px;
    	margin-top: 470px;
    	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.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oo that makes sense too.

    Quote Originally Posted by Paul O'B View Post
    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.
    I get that.

    Quote Originally Posted by Paul O'B View Post
    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.
    I almost understand that. I don't quite know know what you mean by having everything "in the flow"...

  13. #13
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    #coverimage {
        background-color: #FFFFFF;
        height: 500px;
        margin-top: 5px;
        position: absolute;
        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:

    Code:
    #coverimage {
        background-color: #FFFFFF;
        height: 500px;
        margin-top: 5px;
        position: relative;
        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.

  15. #15
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for explaining

  16. #16
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    www.ucsite.co.uk/parsonage

    Thanks

    M

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    The links seem clickable to me and I assume as soon as you put the destination in the href they should work.

    Code:
    <a href="">HOME</a>
    Those links would have been better in an unordered list structure and use css rather than non breaking spaces.

  18. #18
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That would have been embarrassing if that was all it is!

    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?

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    #pagebody{margin-top:-30px}
    #coverimage{position:relative}
    #membership{top:0}
    Add that code and the links will work.

  20. #20
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay. I had a feeling it was related. I will take out the "absoute"(s) and configure it from there. Thanks.

  21. #21
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have another question, same site, so I'm putting it on this thread...

    Please see www.ucsite.co.uk/parsonage - I'm missing something, why is the menu banner floating in the wrong place in IE? Can you spot the problem? I thought it was because I had margin: 0 auto; and margin-top: defined on the #main nav ID so I fixed that - to no avail

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Seems to work OK in IE7 to me ... and given that IE7 has a tiny userbase now (less than 1%) I wouldn't be bothered by any quirks.

    A nuch bigger iss ue is the size of the images in the slider. for a first-time visitor, those images are shockingly slow to load, making for a terrible user experience. I checked just one image and it was nearly a megabyte in size—way too large. Make sure to optimize them in a program like Photoshop or Fireworks. They should be down around 100 kb.

  23. #23
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reminder.

    I think IE 8 might be the issue actually.

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Maija Liepins View Post
    I have another question, same site, so I'm putting it on this thread...

    Please see www.ucsite.co.uk/parsonage - I'm missing something, why is the menu banner floating in the wrong place in IE? Can you spot the problem? I thought it was because I had margin: 0 auto; and margin-top: defined on the #main nav ID so I fixed that - to no avail
    HI,

    The problem is that you are using an old fashioned hard clearing element in the html which was always patchy in support unless it was properly constructed. IE8 is collapsing the margin through the top and you need to add overflow:hidden here.

    Code:
    .clearfix {
    	clear: both;
     overflow:hidden
    }
    It's similar to a haslayout bug although IE8 wasn't supposed to have haslayout in place.

    You really should use another clearing/containing method instead rather than empty elements in the html. See the css faq on floats for a few of the common methods.

    Also note that this is invalid:

    Code:
    <li><a href="http://www.parsonagehotel.co.uk/spa">CLOISTERS SPA</a> </li>
    .
    <li><a href="contact.htm">CONTACT</a>
    </p>
    </li>
    There are 2 errors above.

    Firstly you cannot have any content outside of the list pair so the dot is in no-mans-land and invalid. It must be inside the list.

    i.e.
    Code:
    <li><a href="http://www.parsonagehotel.co.uk/spa">CLOISTERS SPA</a> . </li>
    Secondly you have a closing p tag but no opening p tag so remove the closing one.

  25. #25
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How I have got this far without fully understanding things like "block" elements I don't know.

    Oh wait, something to do with learning as I go along but how did it not come up earlier!?

    Anyway, I like learning, so... I'll go see if I can work out what to replace "clearfix" with.


Tags for this Thread

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
  •