Sorry...here goes...
It's a PHP app, so it's a little all over the place...It doesn't actually exist in this form in my app as all the HTML code is parsed into tokens in my templates...but I will try to put it together.
I create a hidden <div> in the main page (body):
Code: Select all
<div id="help_splash">{help}</div>
with the following css entry:
Code: Select all
#help_splash { z-index:999; display:none; }
I then replace {help} with the following:
Code: Select all
<div style="padding:8px; color:#FFFF00; width:500px; height:400px; position:absolute; margin:-200px 0 0 -250px; left:50%; top:50%; border:1px solid #058; background-color:#069;">
<div>{picture}</div>
<div>{help_msg}</div>
</div>
I know it's messy - I want to be able to place other HTML code in my splash screen and will tidy it up later...
This all works fine (on it's own).
The other portion is a list of checkboxes with captions on a form:
Code: Select all
<input name='groups[]' type='checkbox' value='{group_uid}'>
<span class="adjust">{group}</span>
where 'adjust' equates to:
Code: Select all
.adjust { position:relative; top:-2px; }
in my style sheet. My text for {group} will now show thru my splash-screen.
I actually know what the problem is:
IE (maybe others?) will ignore z-index values for <DIV>s assigned a relative position. If I remove my 2 pixel tweak the problem goes away...My splash-screen covers over my text...
I really just need to know how to position my text without using position:relative or force my splash-screen to cover my text regardless...I have tried margins or padding in my adjust tag...but I assume they won't work in a <span>...
Any ideas...I know it's trivial, but I like to code how I want things to be - not what I am forced to accept coz' M$ can't be bothered to get it right...
Ta, Seppo