...

View Full Version : Scrolling feeback button help



kyllle
12-08-2009, 01:51 PM
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

Rowsdower!
12-08-2009, 02:33 PM
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:

.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:

<div id="feedback_wrapper">
<a href="" class="feedback"><img src="images/feedback.gif" alt="Feedback" /></a>
</div>
CSS:

#feedback_wrapper {
position:absolute;
z-index:999;
}
.feedback {
height:168px;
left:0;
position:fixed;
top:300px;
width:33px;
}

kyllle
12-08-2009, 03:02 PM
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

Rowsdower!
12-08-2009, 03:05 PM
No problem! :thumbsup:

kyllle
12-08-2009, 03:24 PM
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?

abduraooft
12-08-2009, 03:37 PM
IE6 doesn't support fixed position. However you may cleverly tackle this. Have a look at http://www.cssplay.co.uk/layouts/fixed.html

Rowsdower!
12-08-2009, 03:52 PM
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! :D

kyllle
12-08-2009, 03:59 PM
Excellent!! Thanks guys!!

abduraooft
12-08-2009, 04:01 PM
abduraooft's solution shows more ambition than I have today! :D

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. :rolleyes:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum