line break despite z-index? - php

Question

hello i have a problem using z-index. i have a form with some input fields. beside them i have some error divs for echoing the php error messages. the problem i have is, that the error divs, that only will come up when a error is set, leads to a line break for the input fields.
.wrapper #mainframe #left #frame form fieldset ul .fr {
width: 180px;
float: left;
margin-bottom: 18px;
margin-left: 25px;
}
.wrapper #mainframe #left #frame form fieldset ul input.err {
width: 180px;
height: 18px;
line-height: 18px;
padding-left: 5px;
margin-top: 3px;
outline:none;
background-image: url(../images/error.png);
background-repeat:no-repeat;
background-position: 172px 50%;
}
.wrapper #mainframe #left #frame form fieldset ul .erl {
color: #FFF;
position: relative;
z-index: 1;
background-color: #f23;
width: 200px;
height: 30px;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
line-height: 30px;
text-align: center;
left: +217px;
top: 25px;
}
here is the html code:
<li class="fr">
<label for="a">a</label>
<?php if (isset($errors['a'])):?>
<input class="err" type="text" id="a" name="a" value="<?php echo isset ($_POST['a'])? $_POST['a'] : ''; ?>" tabindex="20" autocomplete="off"/>
<?php if ( isset($errors['a'])
&& empty($errors['a'][0]) == true ):?>
<?php echo "<div class='erl'>";
echo $errors['a'][0];
echo "</div>";
endif;?>
<?php endif;?>
so i dont understand why this is happening. i thought using z-index would be something like causing two layers (z-index:0 and z-index:1) so that there should be enough place left and right hand side on the second layer z-index:1. if there is someone who could tell me how to solve this i really would appreciate. thanks a lot.

Answer 1

I would look for things like padding and margin (http://css-tricks.com/the-css-box-model/) that may be adding unintended spacing and overall width.
Also, check to be sure that whatever elements you apply z-index have their position explicitly declared... also the positioning of the parent elements (http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp).
Finally, I would look at issues with the hasLayout property (http://www.satzansatz.de/cssd/onhavinglayout.html). This may be what Vinny is talking about, since Z-index does not change the way the document flows so much as the stack order. Try using position:absolute on your error messages to remove them from the overall flow of the document.

Answer 2

To avoid line-breakage, you will need to remove the error element from the flow of the document. The z-index attribute has absolutely nothing to do with that; it only effects the stack order of the element, otherwise it is position-agnostic.
Which is why I referred you to this jsfiddle; an alternative to help fix your woes.

Answer 3

Try this:
HTML:
<li class="fr">
<label for="a">a</label>
<input class="err" type="text" id="a" name="a" value="" tabindex="20" autocomplete="off"/>
<div class='erl'> Error text</div>
<div class="sp"></div>
</li>
CSS:
//for label
.fr label, .fr .err, .fr .erl {
float:left;
}
.fr .sp {
clear:both;
}