IE z-index and positioning bug

[duffs]

Hi,

I have an IE-specific problem where the fix for one bug caused another, and I'm not sure how to fix both.

Look at

http://www.silverleafdesign.com/contact.php

There's a div with a rounded rectangle semi-transparent images as its background. This div shows behind the form fields.

In order to get the form fields to be clickable, I had to use z-index (otherwise they were visible, but technically behind the rectangle so you couldn't click in them).
.fields {
z-index: 1;
position: relative;
}
#formbackground {
z-index: 0;
}
However, IE has a known z-index bug. The only way I could get the layering to work properly in ie was to use position:relative for the fields div.

Great, now I can click in the form fields, but...IE has another known bug. It handles position:relative to be relative to the entire page, not to its container div. So if you shrink the window, the rounded rectangle shrinks with it, but the form fields do not.

This page works fine in Firefox and Netscape.

Does anyone know how I can solve both problems: 1. have the fields be clickable and 2. have them collapse properly with the window?

TIA.

 

[Vragabond]

I have never had problems with positioning in IE. However, one must understand how positioning works. Elements are positioned according to their first positioned parent. If none exists, that parent is the viewport or browser window. As long as you position one parent element of your problem element, you should be ok. Just make sure you only apply position: relative; to it, and it should cause you no problems.

 

[duffs]

Hi,

Thanks for your reply. If I'm understanding what you're saying, it sounds like I need position:relative on the parent (i.e. the rectangle) to fix the position problem.

Unforunately, that only solves half my problem. The z-index bug in IE is only fixed if position:relative is on the top-most element, in this case, the child (form fields). If I implement what you suggest, then I'm back to the problem of not being able to click on the form fields.

Does anyone know of a way to fix both problems?

TIA

 

[BillyRayPreachersSon]

You keep talking about a z-index bug in IE - but I do not believe that what you are saying is a bug is [a bug].

As Vragabond has said, you are mis-understand how z-indexes work.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[duffs]

Hi, Thanks for your post.

Actually, Vragabond didn't say I misunderstand how z-indexes works, he said I misunderstand how positioning works.

If you Google "ie z-index bug" you will see results. I'm not the first person to call it a bug.

Regardless of whether we call it a bug or not, the facts remain (someone correct me if I'm wrong):

1. In IE only (no other browser), z-index only works if the top-most item has position:relative.

2. According to what I discerned from Vragabond's post, my positioning problem (form fields stay stationary when window resizes) can be fixed by putting position:relative on the parent only (the rectangle).

3. Hence the problem. If I put position:relative on the child (form fields), I have the positioning problem, but I can click on the fields. But if I put position:relative on the parent (rectangle), I fix the positioning problem but I can no longer click on the fields. (I've tested this and it works as I've described).

So again I ask, does anyone know a way I can fix both problems?

 

[Vragabond]

I never said you shouldn't put position: relative on the element itself. I just said you should define its boundaries by giving its parent position: relative. You can have as many position: relatives as you want. I've used many before and never ran into any problem.

 

[duffs]

Unfortunately, if I also put position:relative on the parent, I can no longer click on the fields.

You say you've never had problems before. But I'm willing to wager that you've never had exactly my situation before: form fields as the child, and something that should display behind them as the parent.

Try it yourself if you don't believe me that there's a problem. Create a little test page with a few form fields and an image behind them. If you can get it to work so that you can type into the fields but also have them collapse with the window, then I'd love to know about it. Keep in mind that I'm only referring to Win IE (I have 6, but I believe it is the same situation in 5).

Thanks.

 

[Vragabond]

I do believe you're right -- I never experienced anyhting like that. However, I would never put an image over my form fields and move it behind them via z-index in the first place. There is a better solution, I am sure.

 

[duffs]

I'm definitely open to suggestions, which is why I posted to start with. Anybody know a different way to do this that will still give me the visually effect I'm looking for?

 

[duffs]

By the way, someone else suggested I make the rectangle be the background image for the same div as the fields instead of a separate div. Sounds good on paper, but when I tried that, I still couldn't click on the fields in IE.

 

[BillyRayPreachersSon]

Given that when you scale the font up (but not in IE), the text goes out of the box (and becomes illegible against the dark background), I'd look at totally re-doing the solution to be scalable.

There are plenty of code examples that show how to do scalable drop-shadows - the same code would easily work for rounded corners.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[duffs]

Wanted to post what I ended up doing...

I don't think Dan's solution would have worked. I couldn't just put scalable rounded corners around the background box since the box itself was semi-transparent.

So, I ended up making the box be part of the background image.