Page 1 of 1

combining z-index and <DIV>s with position:relative?

Posted: Mon Mar 20, 2006 7:04 am
by stsr11
I use

Code: Select all

<span style="position:relative; top:-2px;">caption</span>

to adjust the position of text which follows radios and checkboxes on forms - yeah, I know kinda anal :lol:

All worked well until I coded a centred splash screen with z-index:999. Because of the position:relative in my span the captions appear through my splash screen.

Anyone know how to adjust my radio captions without using position:relative - have tried margins/padding - no effect on spans (i think) or force my splash screen to always stay on top? (even over a position:relative).

Am coding for IE5+

Thanks Seppo

Posted: Mon Mar 20, 2006 9:25 am
by matthijs
I can help if I see more code, preferably the complete page including css.

Posted: Mon Mar 20, 2006 10:02 am
by stsr11
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

Posted: Mon Mar 20, 2006 11:34 am
by matthijs
Strange, when I test

Code: Select all

<input name='groups[]' type='checkbox' value='{group_uid}'>
<span class="adjust">Some text</span>
It's aligned perfect (FF and IE6)
Also when I test this it's all alligned ok:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
#help_splash { z-index:999; /*display:none;*/ }
.adjust { 
/*position:relative; top:-2px;*/
line-height:1em;font-size:1em;
 }
#somediv {
 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;
}
-->
</style>
</head>
<body>



<div id="help_splash">
  <div id="somediv">
   <div>{picture}</div>
   <div>{help_msg}</div>
  </div>
</div>

<input name='groups[]' type='checkbox' value='{group_uid}'>
<span class="adjust">{group}</span>

</body>
</html>
What you should do is start with a clean unstyled page and then add piece by piece of css to your stylesheet. That way you know what's causing the trouble. Also, try to set all margins, paddings and line-heights to defaults first. Like:

Code: Select all

css:
#div p {
margin:0;
padding:0;
line-height:1em;
font-size:1em;
}
And then add some margins and/or paddings as wished.

Posted: Mon Mar 20, 2006 2:25 pm
by Benjamin

Code: Select all

input.Radio_Default {
  vertical-align: middle;
}

span.RadioFix {
  padding: 0px 10px 0px 5px;
  vertical-align: middle;
}

Code: Select all

<input type="radio" class="Radio_Default" name="Name" /><span class="RadioFix">Select This Option</span>
Should be all you need. You can't set the height or the top and bottom padding or margin on inline elements. You can set left and right margin and padding on inline elements.

Posted: Mon Mar 20, 2006 3:15 pm
by matthijs
Wow, a property of which I only knew the name, which I've never used so far :wink:
But agtlewis is right, it might work in your situation. If you (stsr11) run into new problems here is an explanation of the property.
However, I still wonder if it's needed though. I tested my code and the aligment was fine.

Posted: Mon Mar 20, 2006 5:33 pm
by stsr11
Your right, guys thx.

It works away from my app - so there must be something in css effecting it...but I'm dammned if I can find it (at the moment)

I have literally dozens of recursively generated <div>s and my style sheets are templates too!

When I have finished my app, I will go back and rationalize my css - after all it's the only css issue I have at the moment. So I'm not too keen to rock the boat over 2 pixels... :P

I have learn't a valuable lesson though - pay more attention to my css. I am fairly new to it and I don't think I give it enough thought or respect...

Once again - thx for the help.

Seppo :D

Posted: Tue Mar 21, 2006 2:38 am
by matthijs
Yeah, css can be quite hard in the beginning. Well, dealing with strange bugs in certain browsers that is. What i sometimes do when I want to redo/ clean up the css and make sure it works in all browsers
- view the page(s) in a browser
- view source and save that
- start with an empty stylesheet
- start adding the main layout stuff first. like #header, #content, #sidebar, #footer. Only if that's rock solid start adding the details
- keep things as simple as possible
- keep enough breathing room around elements, certainly with floats
- don't use margin and padding and width on the same element. instead use the child elements for margin

What I often notice is that with the really obscure and strange bugs in IE, that removing stylerules works better then adding them. Guess ie has enough trouble understanding the css, let alone when things get complicated. Like floats in floats in floats combined with other styling and positioning rules :)