1 {{ upvoteCount | shortNum }}
1 {{ upvoteCount | shortNum }}

Alignment of Search Field + Magnifying Glass

by dansbanners
1 replies
  • WEB DESIGN
    • |
Hi,

I didn't realize that the alignment of the Search Field and the adjacent Magnifying Glass could be out of whack in the topbar in my site till I saw it in another computer.

Here's the CSS:


.search-dansbanners {
float: right;
}

.search-dansbanners form {
width: 240px;
}

.search-dansbanners .inp-text {
-moz-border-radius: 15px 0 0 12px;
-webkit-border-radius: 15px 0 0 12px;
border-radius: 15px 0 0 12px;
float: left;
font-family: Verdana, sans-serif, Arial;
font-size: 12px;
padding: 4px 5px 3px;
width: 193px;
}

.search-dansbanners .inp-text {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}

.search-submit {
cursor: pointer;
height: 23px;
width: 33px;
}

.search-submit {
width: 25px;
}
I know I could always change some of the above dimensions or paddings to fix the alignment in some of the computers or browsers.

However, does anyone have any suggestions on make the solution more universal? That is the alignment would work regardless of what computer or browser is it on, etc?

I thought maybe one possibility is to place the magnifying glass within the search field and not next to it? What do you think of it?

I'd appreciate it. Thanks in advance!
#alignment #field #glass #magnifying #search
  • Profile picture of the author Carlo Manf
    Hi Dan. Your design is very outdated; it's not responsive. Making it responsive would definitely make your alignment more universal.

    I should be able to help with your search field alignment challenge – which particular dimensions are you referring to, and which computer/browser was not displaying it as you expected, and how was it displaying it?
    {{ DiscussionBoard.errors[9835785].message }}

Trending Topics