Hover area wrong on first tab object

I am stuck on this, can't figure out why the first tab can't be hovered or clicked on unless you scroll up underneath the first tab. This flaw exists in Firefox only.

Now in IE and Safari, the left margin for the first tab is wrong and should match up to Firefox. I originally got the tab script from Development Drive website, but the support over there is quite lacking and seems they only respond when they feel like it.

I have been stuck on this issue for a long time and would appreciate some pointers to clean this one up.

http://phoozl.com

 

That's because your code for the searchbox form is overlapping that tab and taking the mouse focus.

Stop using tables for your search box and figure out some cleaner CSS to position it correctly.

 

What tables? I hate tables.

 

Disregard my last. I never realized I used tables there because I hate them. However, it is the only way to keep the images in place. When you look at the screen space occupied if I put a border around the search box, I disagree. The search box does not overlap the tabs and the table is contained inside another container. I think the error is actually inside the javascript.

 

I'm unable to replicate the issue in Chrome. Have you managed to figure out what it was? I don't have access to Firefox or IE right now.

 

Problem is in IE, Safari, and in FF. I have not resolved the issue no.

 

As it's been said above your searchgroup div is overlapping your first tab. Remove any other attributes (you may put back in later) in .searchgroup and try this in CSS

.searchgroup {
position:absolute;
top:180px;
right:20px;
}

Code (markup):

Hope it helps.

 

Holly cow. This is months of trial and error on this. I thought I would just try it but to be honest, I did not believe it at first. I just didn't buy in to how the searchgroup div was overlapping the tab mousefield. Anyway, thanks. I got years of development in my belt and stubborn as hell when it comes to just trying things sometimes.