Z-Index and the forms block
Permalink
Hi all,
I am making a very custom website for my wife. Its based on a full screen PSP image sliced into an html table.
I have set a gallery block to z-index -1, the main table to z-index 1 and all of my concrete editable areas are positioned absolute with a z-index of 2.
This is working fairly well although i discovered that absolute positioning in ie was working differently to firefox.
I therefore implemented a *{padding:0; margin:0;} in my css file which fixed that problem.
I have now added a form block to one of the z-index:2 areas, but I'm finding that in firefox the text boxes and check boxes are all unselectable unless you click on the very top line of the box, whilst the text area and captcha work, but in internet explorer the check boxes work and the text area doesn't.
I am still on 5.3.1 on this hosting and will upgrade in a minute to see if that is the problem. However - anyone got any ideas why the form is playing up?
I am making a very custom website for my wife. Its based on a full screen PSP image sliced into an html table.
I have set a gallery block to z-index -1, the main table to z-index 1 and all of my concrete editable areas are positioned absolute with a z-index of 2.
This is working fairly well although i discovered that absolute positioning in ie was working differently to firefox.
I therefore implemented a *{padding:0; margin:0;} in my css file which fixed that problem.
I have now added a form block to one of the z-index:2 areas, but I'm finding that in firefox the text boxes and check boxes are all unselectable unless you click on the very top line of the box, whilst the text area and captcha work, but in internet explorer the check boxes work and the text area doesn't.
I am still on 5.3.1 on this hosting and will upgrade in a minute to see if that is the problem. However - anyone got any ideas why the form is playing up?
might be IE z-index stacking bug
http://mahzeh.org/?p=23&bt=JavaScript/DHTML/AJAX&bq=cat%3D8...
something doesn't quite sound right about how things are organized too according to your description but i'll hold off until I see the example...
http://mahzeh.org/?p=23&bt=JavaScript/DHTML/AJAX&bq=cat%3D8...
something doesn't quite sound right about how things are organized too according to your description but i'll hold off until I see the example...
thanks Mario - it was a stacking issue. Not quite sure why, but despite having the highest z-index, the form was sitting underneath a table cell which was only (for some reason) letting clicks through on the field borders.
Have done away with the z-index as it doesn't appear to be needed anyway.
Thanks for the suggestion guys!
Iain
Have done away with the z-index as it doesn't appear to be needed anyway.
Thanks for the suggestion guys!
Iain
I don't know what exactly would be causing your problem, but it sounds like it's a general problem with the HTML/CSS, not specific to concrete5. You could test this out by serving the page statically -- go to the page in concrete5, do a "View Source", copy and paste all that into a new file, making sure you copy the css and images etc. to a new directory where they can be referenced by the new "static" html file you copy/pasted. Often times my original design works and then I have a problem with it in a CMS and I think it's the CMS's fault but actually I changed a couple of things here and there in the meantime that I forgot about, and those things are what caused the problems, no the CMS.
Anyway, I am not a design expert but in my experiences I have never gotten z-indexes to work the way I want them to. So you may want to try doing the layout without them (not sure exactly what this entails, though). Also, are you familiar with FireBug? It's a Firefox add-on that lets you inspect HTML and CSS on a page. It is an amazingly useful tool for identifying problems with layouts such as these. It won't tell you what is wrong, but it will help you isolate certain areas and change css properties on the fly so that you may find out what the problem is much faster than changing code and reloading the page over and over again.
Best of luck!