css or level problems with pulldowns

[Slinky]

So here is a good one that has me a little stumped. This is the home
page of the site:

http://tinyurl.com/mkrngh

If you notice, the quicksearch is functional but can't be clicked on.
I'm not sure why. This seems to be the offending code. If I remove it,
the quicksearch jumps out of position but is functional. I'm trying to
figure out why as is, the drop downs are not accessible.

div.homepage div.quicksearch {
float:left;
height:240px;
padding:0 0 0 210px;
width:317px;
/*background: url('quicksearch.jpg') no-repeat right
top;*/ }

 

[Slinky]

So here is a good one that has me a little stumped. This is the home
page of the site:

http://tinyurl.com/mkrngh

If you notice, the quicksearch is functional but can't be clicked on.
I'm not sure why. This seems to be the offending code. If I remove it,
the quicksearch jumps out of position but is functional. I'm trying to
figure out why as is, the drop downs are not accessible.

div.homepage div.quicksearch {
float:left;
height:240px;
padding:0 0 0 210px;
width:317px;
/*background: url('quicksearch.jpg') no-repeat right
top;*/ }

Apparently it is the float:left

But I can't figure out what to do about this to realign without the
float affecting the layout and the inability to click. Much appreciate
anyone's help explaining this issue.

 

[richard]

So here is a good one that has me a little stumped. This is the home
page of the site:

http://tinyurl.com/mkrngh

If you notice, the quicksearch is functional but can't be clicked on.
I'm not sure why. This seems to be the offending code. If I remove it,
the quicksearch jumps out of position but is functional. I'm trying to
figure out why as is, the drop downs are not accessible.

div.homepage div.quicksearch {
float:left;
height:240px;
padding:0 0 0 210px;
width:317px;
/*background: url('quicksearch.jpg') no-repeat right
top;*/ }

you might want to check out ondoubleclick.
onclick assumes the first click and acts accordingly.

 

[Slinky]

you might want to check out ondoubleclick.
onclick assumes the first click and acts accordingly.

Thanks Richard - but apparently it's the float:left which is causing
the problem. If I delete that the problem goes away and the dropdowns
work perfectly, although they are misaligned.

 

[Doug Miller]

The HTML validator at http://validator.w3.org shows 59 errors; perhaps you
should fix those first.

 

[richard]

Thanks Richard - but apparently it's the float:left which is causing
the problem. If I delete that the problem goes away and the dropdowns
work perfectly, although they are misaligned.

Actually, I had posted this to the wrong thread.

 

[Slinky]

The reason is that your <div class="dataitem single previewbox"> is on
top of the floated quicksearch div.

It may have a transparent background, but it is not immune to the mouse.
So you're clicking on the dataitemsinglepreviewbox div, not on the
quicksearch stuff underneath it.

The reason it's stacked above is because it's position: relative. It's
in CSS 2.1 9.9.1. Floats go at level 4 (above normal flow stuff, even
that comes later), but positioned boxes go even higher, at level 6.

It's not obvious why you need position: relative on that div, so maybe
you could just get rid of it. If you do need it for something, then set
the quicksearch float to position: relative and z-index: 1 to pull it to
the front. It needs position: relative because z-index only applies to
positioned boxes.

I've been cleaning up the CSS where it seems minimal but THIS was the
problem. How do I say a HUGE THANK YOU! I tried the index but without
the position:relative it wasn't working. Ben.... thank you so much!

 

[Doug Miller]

I've been cleaning up the CSS where it seems minimal but THIS was the
problem. How do I say a HUGE THANK YOU! I tried the index but without
the position:relative it wasn't working. Ben.... thank you so much!

Don't forget you still have a lot of validation errors to fix...