Image icon align vertically?

HTML & CSS
1

hello,

I have a magnifying glass icon on this page,
http://myonlinesmallgroup.com/warren/

below [SIGNIN] it is inside a search input box.

I tried to center it vertically,


icon-search {
	vertical-align: middle; 
}

but no luck.
any help please.
thanks in advance.

2

Hi, Warren,

I’d like to suggest two changes:

First, in HTML, move the input field below the .searchIcon anchor.


<div class="searchContainer clearfix">
    <a href="#" class="searchIcon">
        <span aria-hidden="true" class="icon-search"></span>
    </a>
    <input type="text" class="searchInput">
</div>

Then, in CSS:


#box4 {
    border: medium none;
    clear: none;
    float: none;
    height: auto;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    min-height: 50px;
    position: relative;
    top: 0;
    [COLOR=red]width: 240px;   /* delete me */[/COLOR]
}

And comment out or delete all of these styles (start from scratch):


div.searchContainer a.searchIcon {
    [COLOR=red]color: #303030;
    display: inline-block;
    height: 28px;
    left: 5px;
    margin-left: 0;
    margin-right: -100%;
    padding-left: 10px;
    position: absolute;
    top: 1px;
    width: 50px;[/COLOR]
}

This will position the magnifying glass outside and to the left of the search field. The clickable area of the box can be enlarged, but I would first like to find out if this is going in the right direction. Oh, and with these changes, the magnifying glass icon should be middle aligned.

Cheers

3

@ronpat ;

So far this is the modified version.
http://myonlinesmallgroup.com/warren/

Just don’t mind the <div> border it’s temporary, the purpose is I can see it properly while aligning the icon magnifying glass.

4

Looks to me like you are going about this in the wrong way completely.

Firstly, a search form has two essential parts: an input field (which you have) and the input for submitting the form, which you don’t have. Don’t replace this with an <a>. That’s no use at all.

So, firstly set your HTML right with a proper search form. E.g.

<form method="get" action="" role="search">
  <label for="q">Search this Site</label> 
  <input class="text" type="text" name="q" id="q" value="Search">
  <input type="image" class="submit" src="mag-icon.png" alt="Go">
</form>

Using an input type of image, you can nicely add in the magnifying image that way. You can hide the label if you like, but it’s good to have it there for screen readers anyway.

5

@ralph_m ;

Thanks again dude, the HTML/CSS codes are not from me.
He suggested me that search box.
So i copied it from my co-designer.
I’m just tweaking the icon to position it properly.

Anyway I’ll follow your suggestion.

6

Yep, no problem. It’s best to get the HTML right first, then style it all. Getting that link positioned wouldn’t have helped much anyhow, as you’d have to replace it. It’s looking good now. Are you happy with the placement of the mag glass? Most people would expect it to be on the right.

7

@ralph_m ;

Yes that was the original design suggested by my co-designer.
yup mag must be on the left.

I agree with you it should be on the right, but I’m only following orders above.
Anyway this thread is solved.

8

No problems. Glad it helped. It’ll be fine on the left. :slight_smile: