[Solved] Ghosting div result of translate

[NoobSimon]

Not quite sure if my title is of any help at all but I will try to explain as best as I can.

I have the following code snippet http://codepen.io/aggressivedigital/pen/rVXZOj

I want to have this search box centred horizontally on the page…. So far so good. The only issue is that the search box is not centred properly because of the ‘search icon’ as it leaves a ghosted representation of the DIV, the picture below should help explain what I mean.

Now of course I could use something like ‘margin-left: -19.5px;’ but that does not seem like the best solution.

[Shikkediel]

Doesn’t look like a ghosted representation but the actual placement of the span. The button inside is just moved to the left. Instead, I’d move the whole span (and raise it’s z-index).

Edit – hmm… that’ll still leave it too large somehow.

[NoobSimon]

Any ideas anyone?

[NoobSimon]

Thats done the trick. Thank you very much!

[Author]

Posts