Question

Here’s my fiddle – http://jsfiddle.net/UBHj8/

So my problem is pretty obvious, just can’t seem to get the svg to hide the search bar in the right spot. Can someone please help, this little error is driving me nuts.

<div class="togglesearch">
    <svg id="hidesearch" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10" style="margin:0px 0px 0px 10px;">
        <polygon points="10,10  10,0  0,5">
    </svg>

    <svg id="showsearch" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10" style="margin:10px 0px 0px 10px;">
        <polygon points="0,0  0,10  10,5">
    </svg>
</div>

Answer 1

Do you want something like this?

I juste absolute-positioned the svg images in the container, and matched the vertical positions with a padding for the searchbox.