A <div> block's CSS styles change on display=none then display=block

Question

Here is a div block that appears fine as part of a top row of 5 nearly-identical divs that make up a Nav bar at the top of my page -- although there are 5 of the divs like the one I show here with an anchor, I'm only showing the one that goes on the far right end of the Nav bar for my "User Dashboard" link:

<div class="pageTopRowContainer"> // this is the containing div for all 5 of the Nav bar divs

    // not shown here are the first 4 identical-except-in-name-and-linked-page divs 
    //    with <a> anchors.......
    // And here's the right most div-with-<a>-anchor on my Nav bar:

    <div class="pageTopRowContainerLabel" id="UserAccountNavbarLinkId">
        <a class="pageTopRowTextStyle"
           href="http://localhost/ServiceMain/UserDashboard.php">User Dashboard</a>
    </div>
</div>

Here are the CSS styles:

.pageTopRowContainer
{
    display:inline-block;
    width:100%;
    font-family: Arial, sans-serif;
    font-weight: bold;
}


.pageTopRowContainerLabel
{
  display:inline-block;
  background-color: green;
  color: RGB(255,255,255);
  padding-top: 2px;
  padding-bottom:2px;
  padding-left:5px;
  padding-right:5px;
}


.pageTopRowTextStyle
{
    color:RGB(255,255,255); 
    text-decoration:none;
}

All 5 divs-with-anchors appear fine: left-to-right in one row in my Nav bar, each div as block with a green background wide enough for the text label I have in each div.

The div that's giving me trouble is the one above, the one with the text label of "User Dashboard". It normally appears fine as the rightmost 5th div on the Nav bar.

I need to hide this rightmost div until the user logs in.

So I added javascript (below) to show/hide the div above based on a session variable of 'login status.'

And this showing/hiding logic works in the sense that it shows and hides that rightmost div "User Dashboard" as the user logs in and logs out.

EXCEPT instead of a rectangle on the right end of the Nav bar with a green background wide enough for the text label "User Dashboard" -- when the 'display=block' javascript executes -- the "User Dashboard" (previously rightmost) div -- now appears below the other 4 Nav bar divs and its green background is as wide as the browser with the "User Dashboard" text left-justified.

I don't see how this could be a 'float' issue -- take another look at the div declaration above. That div declaration appears exactly like the other 4 divs on the Nav bar that are to its left -- AND before I added the Javascript below, all 5 divs appeared left-to-right in one row in my Nav bar, each div as block with a green background wide enough for the text label I have in each div.

Here's the showing/hiding javascript code -- it only applies to the rightmost div on the navbar (above) -- if the user is logged in they need to see the above 'User Dashboard' div and if not logged in I set display=none:

if ( isset($_SESSION['loginStatus']))
{
    // we get here iff the 'loginStatus' session variable has already been
    // created for this user's session.  
    // check if there is a logged-in user, then make visible the 
    // 'User Dashboard' button-link on the Nav bar
    if($_SESSION['loggedInUserName'] != "")
    {
        echo '<script type="text/javascript"> 
             document.getElementById(
                  "UserAccountNavbarLinkId").style.display="block";</script>'; 
        echo '<script type="text/javascript"> 
             document.getElementById(
                  "UserAccountNavbarLinkId").div.className
                            ="pageTopRowContainerLabel";</script>';
    }
    else
    {
        // no logged-in user, so hide the 'User Dashboard' button-link on the Nav bar
        echo '<script type="text/javascript"> 
             document.getElementById(
                       "UserAccountNavbarLinkId").style.display="none";</script>';    
    }
}

Why does my CSS style not get 'honored' when I re-set the div to display=block?

I tried the following and it did NOT help: in the code above I added the

document.getElementById(
                  "UserAccountNavbarLinkId").div.className
                            ="pageTopRowContainerLabel

to try to FORCE the div to take up its CSS style again. NO change.

What do I need to do so that when my div appears it goes right back to where it should be -- to the right of the other 4 divs on the Nav bar?

Answer 1

Because you're setting it to display=block. If you want to revert to whatever the CSS says, use element.style.display = ""; - setting the style to an empty string allows the CSS to take over again.