Fixed Buttons at bottom of Forums don't work.

Discussion in 'Bugs or Exploits' started by Cormac, Apr 29, 2015.

Thread Status:
Not open for further replies.
  1. Cormac

    Cormac Treasure Hunter Knight | YGO 2015 2nd Place Red VIP Black VIP Knight Young Knight Seasoned Adventurer Adventurer

    Joined:
    Feb 16, 2015
    Messages:
    311
    Likes Received:
    467
    Gender:
    Male
    All of the buttons at the bottom of the forums (Stray's design, Language, Contact Us, Help, Home, Top) don't work for myself and several other users who use Google Chrome as a browser.

    I haven't tested this on any other browser. @StrayPixel fix pls
     
  2. Illyon

    Illyon Pokémon Master | Treasure Hunters God Christmas VIP Halloween VIP Blue VIP Veteran Knight Young Knight Seasoned Adventurer

    Joined:
    Dec 11, 2014
    Messages:
    870
    Likes Received:
    443
    Gender:
    Male
    The problem also appears on other browsers (Firefox user here). It is known and being worked on.
     
  3. StrayPixel

    StrayPixel

    Joined:
    Dec 11, 2014
    Messages:
    35
    Likes Received:
    46
    Gender:
    Male
    Yeah, sorry about that :p Blame @Black Abyss for that XD

    I'll fix them soon :)

    ~Stray
     
  4. Illyon

    Illyon Pokémon Master | Treasure Hunters God Christmas VIP Halloween VIP Blue VIP Veteran Knight Young Knight Seasoned Adventurer

    Joined:
    Dec 11, 2014
    Messages:
    870
    Likes Received:
    443
    Gender:
    Male
    Let the Blame Game begin!
     
  5. XenoWarrior

    XenoWarrior Administrator Staff Member Administrator Knight Young Knight Seasoned Adventurer

    Joined:
    Nov 25, 2014
    Messages:
    104
    Likes Received:
    263
    The problem is the "WHO-CHARACTER" element to the left of the style.

    <div style="position:fixed;z-index:0;width:100%;height:100vh;background:url('http://age-of-aincrad.com/assets/images/who-character.png') no-repeat;background-position:center left;"></div>

    As you can see, the style attribute is causing this problem as an invisible layer is blocking the buttons for some strange reason.

    Can't click: http://projectge.com/p/uXenoWarrior_14308106252_2015805050723459.png
    Check element: http://projectge.com/p/uXenoWarrior_14308106573_2015005050724171.png
    Solution: http://projectge.com/p/uXenoWarrior_14308107184_2015505050725181.png
     
    Illyon and Cormac like this.
  6. XenoWarrior

    XenoWarrior Administrator Staff Member Administrator Knight Young Knight Seasoned Adventurer

    Joined:
    Nov 25, 2014
    Messages:
    104
    Likes Received:
    263
    In other words, remove that character on the left! XD @StrayPixel
     
  7. Ignis

    Ignis Seasoned Adventurer

    Joined:
    Dec 24, 2014
    Messages:
    81
    Likes Received:
    14
    Gender:
    Male
    Someone please relocate this woman!
     
    Ivan G. likes this.
  8. Tarulia

    Tarulia

    Joined:
    Apr 30, 2015
    Messages:
    21
    Likes Received:
    15
    Gender:
    Male
    Actual Solution:

    Code:
    footer {
        position: relative;
    }
    The reasoning behind this is pretty simple. The "woman-DIV" is a fixed position element.
    Now according to the CSS Spec, a fixed position element is "broken out" of the rest of the pages render context. Simply put this render context is set above static elements (we recall that static is the default position for pretty much any element). By setting the footer to relative position it is put into another render context on it's own and therefore positioned on top of the fixed div (because it is later on in the markup, you can test this by moving the woman-DIV at the very bottom in the dev tools).

    Well Yeah, long story short: set footer on position relative and you're good to go.
    You might want to use a child selector though:
    Code:
    body > footer
    Just in case there is ever a time you would use more then one footer element on a page (which is perfectly fine). Also technically a child selector is faster then a descendant selector but... yeah... not important on the amount of DOM nodes here :p
     
    Last edited: May 19, 2015
  9. Tarulia

    Tarulia

    Joined:
    Apr 30, 2015
    Messages:
    21
    Likes Received:
    15
    Gender:
    Male
    Aw you killed her :(
     
    Cormac likes this.
  10. Illyon

    Illyon Pokémon Master | Treasure Hunters God Christmas VIP Halloween VIP Blue VIP Veteran Knight Young Knight Seasoned Adventurer

    Joined:
    Dec 11, 2014
    Messages:
    870
    Likes Received:
    443
    Gender:
    Male
    :ded: Weird girl. She will be missed.

    I will lock this thread now since the issue has been fixed.
     
Thread Status:
Not open for further replies.