Home/ Questions/Q 8278099
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T08:53:32+00:00

hello i have a problem using z-index. i have a form with some input

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0