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 9 of 9
  1. #1
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts

    Scrolling feeback button help

    Hi all,

    Iv been trying to position a feedback button the extreme left of my site using position: absolute and placing it 300px from the top of the page, I also want have added fixed to the background image so that it scrolls with the page. My problem is though if you scroll up the page within the 300px set from top the button disappears? I know Im going very wrong with this and would really love your help?

    The page can be found at http://kylehouston.com/testing/test.html

    Thanks loads in advance
    Kyle

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    With CSS issues always validate first (from validator):

    document type does not allow element "a" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag
    You need to wrap your <a> tag in a container first. Then, if you want this item to ALWAYS be visible 300px from the top of the browser window you need position:fixed; rather than absolute. Last but not least, you are losing the feedback button because it is a background image with fixed position. You could either change that to scroll or else put an image tag inside the anchor tag. Since empty anchor tags are a no-no, I'd recommend just using the background image as an actual image.

    So, you could fix it as easily as this but it still wouldn't be the right way to do it:
    Code:
    .feedback {
    background:transparent url(images/feedback.gif) no-repeat scroll 0 0;
    height:100%;
    left:0;
    position:fixed;
    top:300px;
    width:33px;
    z-index:1000;
    }
    Instead you should probably try something like this:
    HTML:
    Code:
    <div id="feedback_wrapper">
      <a href="" class="feedback"><img src="images/feedback.gif" alt="Feedback" /></a> 
    </div>
    CSS:
    Code:
    #feedback_wrapper {
    position:absolute;
    z-index:999;
    }
    .feedback {
    height:168px;
    left:0;
    position:fixed;
    top:300px;
    width:33px;
    }
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    kyllle (12-08-2009)

  • #3
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    Thanks so much for your help Rowsdower!

    I really didnt understand what i had to do there but youve explained it really wel for me!!

    Thanks a milion!

    Kyle

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    No problem!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    just one more question however, when this is viewed in ie6 the tab is placed at the top center of the page? how can i correct that?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    IE6 doesn't support fixed position. However you may cleverly tackle this. Have a look at http://www.cssplay.co.uk/layouts/fixed.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    kyllle (12-08-2009)

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Yep, that or you could use conditional IE6 comments to just change the style to position:absolute; and just let it scroll with the page. I'm lazy though!

    abduraooft's solution shows more ambition than I have today!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    kyllle (12-08-2009)

  • #8
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    Excellent!! Thanks guys!!

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by Rowsdower! View Post
    abduraooft's solution shows more ambition than I have today!
    Quote Originally Posted by http://www.cssplay.co.uk/layouts/fixed.html
    But they didn't know that another bug works in a way that ALLOWS this to be done!

    This is all done using standard CSS with a little help from another IE6 BUG that makes it believe that 'ABSOLUTE' is 'FIXED'.
    Yeah, that's why IE6 is still my favourite browser.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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