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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts

    HTML5 position fixed in IE8

    Hi sirs,

    Well how do you fix a position:fixed in IE8? my document type is an HTML5..

    I tried everything...

    Well what I was trying to do is to keep my navigation bar on top of the browser window.. when I scroll down..

    I currently using jQuery to do this... when i scroll a certain height, I addClass to the navigation list.. and make it "fixed"

    her's the style I am using to make the the navigation stick to the top
    Code:
    .fixed{position:fixed; top:0;}
    everything works well on all modern browser.. except for IE versions < 9 I haven't checked on IE9.. but I have faith on that browser to support that style..

    Thanks

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Are you using html specific tags? such as <nav>?
    Teed

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jhaycutexp,
    IE8 will recognize position: fixed; just fine. It won't recognize some HTML5 elements without some help though, maybe that's the issue instead.

    See HTML5shiv here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    Hi brothers..

    Nope I am not using any html5 tags at the moment... just the basic..

    here's the test page so you can check..
    http://dev.andrewfopalan.com/new_nav...esign_rev.html

    what I am trying to fix..

    I am using only the html5 video.. that's why it should be on html5 document type..

    It looks okay on most recent browsers.. firefox, chrome, safari.. but on IE8.. the position fixed is not being attached... when i scroll down..

    look at it on other browser so you can see how it works.. it looks crap on ie8 right now.. cause i stopped working on it yesterday cause i was so pissed >__<

    but its only a minor fix on the css and it will look the same as the others..

    please help

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    When I view your site in a browser that is not recognizing the position: fixed; the source code does not show the .fixed. Not sure yet why...

    Try making .menu_container an id and apply position: fixed; from there.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts

    Solved by Myself :D

    after several days working on the iPad version of the site.. I was able to fix the problem..

    the thing is that $(document).scroll() doesn't work on IE... instead I used $(window).scroll()

    $(window).scroll() solved the effing problem... heads up to all newbs like me.. hehe

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by jhaycutexp View Post
    the thing is that $(document).scroll() doesn't work on IE... instead I used $(window).scroll()
    Which proves that you have presented the problem in a wrong way. You posted it as it would have been a CSS problem, but it was only your misunderstanding of JQuery syntax
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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