Image anchor tag moves to browser page size
I am developing a search application where the requirement is for a magnifying glass image to be displayed in the search box instead of the image.
On the maximum page, the anchor is in the correct place.
But when the browser is resized (pressing the restore button down next to the close button) the search text box looks like this:
Below is my CSS code (I'm not a CSS guy btw :))
.search_div A
{
background: url("search-white.png") no-repeat scroll 4px 4px #FFFFFF;
border: 1px solid #CCCCCC;
height: 11px;
left: 85.8%;
margin-right: 175px;
padding: 6px 5px 4px 20px;
position: fixed;
top: 32px;
width: 0;
}
Please suggest.
source to share
You are not showing the complete markup for the search button / input, so it is difficult for you to know exactly how to accurately position the search button.
This is how I will do it. Let's say you have the following markup:
<div class="search_div">
<a href="#">Search</a>
<input type="text" />
</div>
To wrap a DIV, the key must explicitly position it relative to:
.search_div {
position: relative;
border: 1px solid LightGrey;
width: 300px;
}
For the search button, make it absolute if the value left
is zero, so it sticks to the left.
.search_div A {
background: url(icon.gif) no-repeat scroll center center #FFFFFF;
border: 1px solid #CCCCCC;
width: 16px;
height: 16px;
left: 0;
position: absolute;
text-indent: -99999px;
}
As an absolute anchor position, the input will be lower. The trick is to plot the left side of the input to a value slightly larger than the anchor's width, so the beginning of the text isn't hidden under the anchor:
.search_div input {
box-sizing: border-box;
border: 0;
outline: 0;
line-height: 16px;
width: 100%;
padding-left: 20px;
padding-right: 3px;
}
You can continue with this technique and then using css to show the search icon on the left or right by adding an extra class to the container .search_div
.
Insert search icon left or right:
.search_div.iconleft a {
left: 0;
right: auto;
}
.search_div.iconright a {
left: auto;
right: 0;
}
Adjust the addition of input to the left or right as well:
.search_div.iconleft input {
padding-left: 20px;
padding-right: 3px;
}
.search_div.iconright input {
padding-right: 20px;
padding-left: 3px;
}
source to share
The line position:fixed;
is most likely a problem because it makes the element fixed relative to the browser window, so you see the element shift when the browser is resized.
What you want to do is apply to position: relative;
both the anchor element a
and its parent element .search_div
to which you want to anchor the anchor. Once the anchor is positioned relative to its containing element, you can use the left, right, top and bottom css attributes to position it as needed.
source to share