Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: css nested divs

  1. #1
    Regular Coder
    Join Date
    Mar 2010
    Thanked 6 Times in 6 Posts

    css nested divs

    I want to make the password field hidden for the styling below on .css.

    <div id="header">
    <div id="header-bottom">
    <div class="login-box">
    <form id="login-form" method="post" name="login-form">
    <input class="text click-clear" type="text" name="uname" title="Username" value="Username">
    <input class="text fake_pass" type="text" name="fake_pass" title="Password" value="Password">
    <input class="text hidden_pass" type="password" name="pass" title="Password" value="" style="display: none;">
    The code I have below is not working.
    .header div#header-bottom .hidden_pass { display:none; }

    I also tried:
    .header div#header-bottom .login-box .hidden_pass { display:none; }

    What does work is forcing the input box itself to hide with a style="display:none;" I could go with that.
    Last edited by mathceleb; 07-22-2011 at 10:59 PM.

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Thanked 130 Times in 129 Posts
    you have <div id="header">
    but your css looks for an elements with class="header"

    And there is no need for defining the parent of a #.
    your css suggest that you have a div with #header-bottom that is a child of the header div, AND another div with #header-bottom that is either not a div or not inside the header div.
    There can be only one element with a specific id in the document at a time.
    so #header-bottom .hidden_pass { display:none; } will suffice

  • Users who have thanked Lerura for this post:

    mathceleb (07-27-2011)


    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts