With CSS issues always validate first (from validator):
Quote:
|
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;
}