SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Position fixed footer makes text unselectable

    Hi
    I've got a postition:fixed footer that shows an image that overlaps the content, so that when the use scrolls, the content disappears underneath. The image is irregular, i.e. it's not a box (it's actually a silhouette of a crowd). The content area has a margin-bottom so that the content can always be fully scrolled down to so that's not a problem. This is working fine in IE6 and up.

    However, the content that shows below becomes unselectable when it's under the footer, which makes sense I suppose, but I don't know how else to achieve this affect? This normally wouldn't bother me, but links and form elements become unusable, which just isn't acceptable.

    I can put a z-index on the content area, but then the content scrolls over the footer, not below it.

    Any ideas?

    Cheers,
    Jordan

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The content area has a margin-bottom so that the content can always be fully scrolled down
    If you will use a bottom padding instead it should work fine.
    This is working fine in IE6 and up.
    IE6 does not support position:fixed; , it requires a workaround using position:absolute.

    Here is one of Paul O'B's fixed footer demos that works fine for me.
    (the text is selectable, it auto scrolls up when you reach the footer)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>PMOB Fixed Footer</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    p {
        margin:0 0 1em
    }
    #outer {
        width:100%;
        margin:auto;
        padding:0 0 75px;
    }
    #footer {
        margin:auto;
        position:fixed;
        margin:auto;
        left:0;
        bottom:0;
        height:50px;
        background:red;
        width:100%;
    }
    * html #footer {
    top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
        position:absolute;
    }
    * html {/* stop jitter by adding a 1px transparent gif to background of html*/
        background-image: url(image.jpg);
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <div id="footer">Footer</div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    Sorry, I should of been clearer. I'm already using the css expression method to get a fake position:fixed working for IE6. The problem is that my footer is 200px high and has a background image applied. The background image is 200px, but only about half of shows, and the rest is transparent. The problem comes when you try and select the text that shows under the top 100px of the background image applied to the footer.

    Does that make sense? The actual footer is covering the text, but because you can see it (through the transparent image) it looks like you should be able to select the text.

    Would it help for me to upload it some where to show you?

    Thanks again,
    Jordan

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    The problem comes when you try and select the text that shows under the top 100px of the background image applied to the footer.
    I think you answered the question yourself

    You can't have the text going under the footer and yet still be clickable through a transparent image. The image will always be on top whether it is transparent or not. Just because you can see it doesn't mean that you can click it.

    Can't you change your image to have less transparent area and then the problem won't occur because the user won't see the text until its scrolled into view.

    A link might help us see the problem but I'm guessing what you want is actually impossible if I understand correctly

  5. #5
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you answered the question yourself
    Ha! Thanks. Unfortunately, I can't make the image's transparent area smaller because of the way this particular image looks. I could if it were more uniform. Good idea though

    I've decided to go with a sticky footer instead, so that the footer stays at the bottom when there isn't enough content but gets pushed to the bottom of the content when there is.

    Thanks anyway guys

    Cheers,
    Jordan


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
  •