HotZone in Search box not aligned...CRITICAL!

[blackhalo]

K, I'm familiar with CSS and ZenCart...but this one's got me stumped!

I can see (using Firebug) that the "hot zone" on my websites search box isn't aligned...
for that matter, it's not even close to the correct size...so the mouse won't "activate" when hovering the search box!

What kills me is that I have NO IDEA how to edit the "hot zone"...
in 10 years of web design I've never seen or heard of this problem before.
I just assumed the "clickable area" of a (text box) form element stays aligned with the box itself...right? Nope.

I'm thinking it has something to do with ImageHandler2...but I'm not positive.

Anyway, check the link below for my site...it's a shorty for my main URL.
(the link expires in 5 days so I don't get hackers trolling my site 6 months from now!)


If the shorty link really bugs you,
contact me for the direct link (sorry for the trouble):
http://enter.to/searchhotzonebroken

Thanks for any help...I can't find ANY mention of this on the forums.

[blackhalo]

EDIT:

This problem is only apparent in Firefox...
it seems to work fine in IE6, which I don't use (but 40% the world does). *sigh*

Can someone clue me in to what this is exactly?
I don't even know where to begin.

[rstevenson]

I'm not sure exactly what is causing the problem, but I'd be willing to bet it has something to do with the 10 DIVs used to wrap up that top line of the page. That would make it very difficult to debug, since every DIV could potentially have styles applied, could have their own margins and paddings, some of which could conflict with others.

I'd start by getting the names of all those DIVs (from View Source in your browser is maybe the easiest way) and then looking at their definitions in the stylesheet. Zero out all of the margin and padding for all of them, then start putting in just what is needed to line things up again.

But maybe before that, reconsider how the template is set up. Why so many DIVs?

Rob

[barco57]

It has something to do with z-indexing on the menu. I say this because the menu wrapper div is overlaying on the search in firefox. In IE7 the drop menu is not displaying correctly. It shows behind the tagline text and than disappears, I assume behind the large header image and since, apparently, IE7 is ignoring the z-indexing the search is not overlayed by anything and works....sort of....it doesn't really search....it takes you to the advanced search but it does populated the keyword field, but take a look at the bread crumb.....its all wrong Home> DVD Movies> Action> Advanced Search when it should be Home> Advanced Search
On top of all of that that search doesn't give me any results, not even telling me it couldn't find anything.......

[blackhalo]

Thanks guys...that's some food for thought!

FYI, the search works just fine (try: Speed)...
it just looks funny because I don't have any other categories in my store.

The template this site is based from is AppleZen...
I didn't wrap all those DIV's, it came that way.

I moved the menu up to the top, but that was done with CSS...
and yes, the menu is a disaster...it's just meant as a placeholder right now.

So...
I'll try tracking down all the z-index for the header,
then try dissecting all the wrapped DIV's....*sigh*

Thanks for the help...I may be back!

[blackhalo]

UPDATE:

It's definitely something to do with the dropdown menu...
I couldn't think straight last night, but first thing I did today was remove the menu altogether (DUH!)...and search works fine!

So that narrows down the problem immensely...PHEW!
I should be able to sort it out now.

THANKS GUYS!!