Absolute positioning and input fields…

[charlie]

I’m working on a Magento Go template and I need to adjust the position of the search form input in the header to drop down and align with the main nav.

It seems easy enough – just use css…

But when I move the position of the element with css via absolute position it becomes almost impossible for the user to click on the input field to enter search terms. There is only a small area at the bottom of the input box that is responsive to a click.

I’ve tried using css on the form element as well as the div enclosed by the form element. it works fine if I leave it within it’s parent element but as soon as I try to reposition it stops working.

http://lilyjewelers.gostorego.com/

Any ideas?

Than you!
Charlie

[Kitty Giraudel]

I had a glance at your work, and I have to say the form element is pretty messed up. Here is what I ended with:

.header form#search_mini_form {

position: absolute;

top: 32px;

right: 7px;



/* Following lines removed: no point

z-index: 50;

display: block;

width: 251px;

height: 26px; */

}



.header .form-search button.button {

position: absolute;

top: 6px;

right: 6px;



/* Following lines removed: seems useless

margin: 0;

width: 17px;

height: 17px; */

}

Nothing more.
I didn’t change anything to the label, neither to the input. But I deleted the .form-search div since it has no point.

You also have a useless span element in the button.

[charlie]

Yes. There are a lot of useless elements in the template. But the source files of the Magento Go template are not available for users to access and change – so I have to work with what is there.

The only way to change existing css is to overwrite with a single custom css file. All of the useless lines of css are in the default tempalte – which there is also no access to.

The code you provided is what I did first, but the input field is difficult to click into. Only a small part of the bottom of the input field reacts to the cursor click. If you click in the middle (as most people will) there is no response. (not very user friendly)

[Paulie_D]

Sounds like a reason not to ‘go’ with the Magento Go template :)

If they are using absolute positioning to place most elements…[/shudder]

Where are you trying to move the search box?

[Paulie_D]

You might also want to edit the page [title] to something like

[title]Lily Jewelry | Home[/title]

just substitute the right bracket set which don’t seem to come through here.

[charlie]

Move it down to align with bottom of main Nav bar.

I am beginning to wonder about this Magento Go product…

[Kitty Giraudel]

With the previous fix I gave you, I’m facing no issue to click in the input.

[charlie]

Maybe it could have something to do with z-index.?.

I would remove it if I could, but I’m stuck with it.

[Paulie_D]

So you want the search section below the checkout links but on a line with the main menu?

On looking through the source code it looks like NOTHING is in the place I would expect to see it.

The links aren’t in source order, the search form is below the checkout links in the source but above them on the page.

UGH!

Howve

[Author]

Posts