Click to view attachmentClick to view attachment
Hi Everyone
I have created the website www.ecosoft-global.com for my employer. Unfortunately the dropdown box on the frontpage is "dropped down" by default whenever you load the page and some of the options are hidden behind the text input box below it. I cant move the text input box as it messes up the look of the page so I need to find a way of making the dropdown box closed by default and opens up on top of everything else. I hope this explains my need well enough but if you look at the page you will see what I mean.
My knowledge of html is quite basic and I have been trying to fix this problem for a few days now. My boss has just told me that if I dont get it fixed he will get someone in to replace me. Can someone please help?
URL: http://www.ecosoft-global.com
I have attached the page and the css sheet.
Many thanks in advance
Ian
Full Version: Drop Down box hidden behind other objects
Form elements may insist of being foremost in some browsers, IIRC this can't be changed. Some workarounds are suggested e.g. here: http://lists.evolt.org/pipermail/javascrip...ary/011775.html
QUOTE(Christian J @ Feb 6 2009, 08:40 AM) 
Form elements may insist of being foremost in some browsers, IIRC this can't be changed. Some workarounds are suggested e.g. here: http://lists.evolt.org/pipermail/javascrip...ary/011775.html
Thanks - I tried those and it still displays the same. I am really frustrated with this now. Its probably a very simple thing which I probably why I cant do it...
Now I noticed the URL to the test page. 
Unfortunately the dropdown box on the frontpage is "dropped down" by default whenever you load the page
In my browsers it's open while the page loads, but closes once the page is finished loading. To avoid that delay you can put (and run) the script that closes it directly after the dropdown HTML, rather than wait for the onload event (that I assume you're using now).
Why not use a real SELECT element instead of the current pseudo-select? A real SELECT should not become obscured.
If he finds someone that can fix the basic problem, please share the solution!
BTW when you click a form field its descriptive default value goes away, and you may forget what was written. To avoid that you might reinsert the default value when the form field loses focus, if the field is empty:
Even better might be to put the description outside the form fields, so it's always visible.
QUOTE(Pluribus @ Feb 6 2009, 02:25 PM)
Unfortunately the dropdown box on the frontpage is "dropped down" by default whenever you load the page
In my browsers it's open while the page loads, but closes once the page is finished loading. To avoid that delay you can put (and run) the script that closes it directly after the dropdown HTML, rather than wait for the onload event (that I assume you're using now).
QUOTE
some of the options are hidden behind the text input box below it.
Why not use a real SELECT element instead of the current pseudo-select? A real SELECT should not become obscured.
QUOTE
My boss has just told me that if I dont get it fixed he will get someone in to replace me.
If he finds someone that can fix the basic problem, please share the solution!
BTW when you click a form field its descriptive default value goes away, and you may forget what was written. To avoid that you might reinsert the default value when the form field loses focus, if the field is empty:
CODE
<input type="text" name="username" id="username" value="Name"
onfocus="this.value=''"
onblur="if(this.value==''){this.value='Name';}" />
onfocus="this.value=''"
onblur="if(this.value==''){this.value='Name';}" />
Even better might be to put the description outside the form fields, so it's always visible.
Click to view attachmentClick to view attachment
Thanks everyone for your help - I have managed to fix it, although I have no idea how.
I do, however have a new problem. The box surrounding the enquiries section on the front page now does not display correctly. It needs to be a lot closer to the box on the left and inline with the flash box above it to the right if you see what I mean. If anyone could help I would appreciate it.
Thanks to everyone that answered I managed to keep my job so I am indebted to you all.
I have attached the new page and the css sheet which was also altered somehow.
Thanks everyone for your help - I have managed to fix it, although I have no idea how.
I do, however have a new problem. The box surrounding the enquiries section on the front page now does not display correctly. It needs to be a lot closer to the box on the left and inline with the flash box above it to the right if you see what I mean. If anyone could help I would appreciate it.
Thanks to everyone that answered I managed to keep my job so I am indebted to you all.
I have attached the new page and the css sheet which was also altered somehow.
QUOTE(Pluribus @ Feb 11 2009, 10:02 PM)
I have managed to fix it, although I have no idea how.
Oops, it appears these things do work in today's browsers (now that I bothered to test). Sorry for the confusion.
Apparently your problem was simply due to the stacking order (z-index) of positioned elements. Actually the CSS is unnecessarily complicated, which makes problems more likely.
An efficient debugging method is described here: http://www.positioniseverything.net/articles/mys-bug.html
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.