One button sitting lower on navbar than the others?

Why is my home button sitting lower on the screen than the other buttons? If I try to adjust it, it just moves or adjusts the size of the blue box, not the text. What is going on?

HTML:

<html>

<head>
    <link href="\stylesheet.css" rel="stylesheet"/>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body id="layoutBody">
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a id="logo" class="navbar-left" href="#"><img src="" alt="Browser does not support image."/></a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul id="navigationbar" class="nav navbar-nav">
                <li id="menubuttons" class="dropdown"><a href="#">@Html.ActionLink("Home", "Index", "Home")</a></li>
                <li id="menubuttons" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">@Html.ActionLink("Our History", "Index", "OurCompany")</a></li>
                        <li><a href="#">@Html.ActionLink("Facilities", "Facilities", "OurCompany")</a></li>
                    </ul>
                </li>
                <li id="menubuttons" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">@Html.ActionLink("HR Forms", "HRForms", "FormsHandlers")</a></li>
                                <li><a href="#">@Html.ActionLink("Corporate Forms", "CorporateForms", "FormsHandlers")</a></li>
                                <li><a href="#">@Html.ActionLink("Employee Benefits", "EmployeeBenefitsForms", "FormsHandlers")</a></li>
                                <li><a href="#">@Html.ActionLink("Accident Forms", "AccidentForms", "FormsHandlers")</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Pay Stubs</a></li>
                        <li><a href="#">Insurance Benefits Portal</a></li>
                    </ul>
                </li>
                <li id="menubuttons" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">ISS Support</a></li>
                        <li><a href="#">Purchase Requests</a></li>
                        <li><a href="#">Maint. Support</a></li>
                    </ul>
                </li>
            </ul>
        <form id="searchbar" method="post">
            <input type="text" id="search" placeholder="Search..." maxlength="50" autocomplete="off" onmousedown="active();" onblur="inactive();">
            <input type="submit" id="searchbutton" value="Go!"/>
        </form>
    </div><!-- /.navbar-collapse -->
</nav>

@RenderBody()
<hr />
<footer>
    <p>&copy; @DateTime.Now.Year - SC2 MyLink</p>
</footer>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
    
<script type="text/javascript">
    function active()
    {
        var search = document.getElementById('search');
        if (search.value == "") {
            search.value = "";
            search.placeholder = "Search...";
        }
    }

    function inactive()
    {
        var search = document.getElementById('search');
        if (search.value == "Search...") {
            search.value = "Search...";
            search.placeholder = "";
        }
    }

</script>
<script>
    (function($){
        $(document).ready(function(){
            $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
                event.preventDefault(); 
                event.stopPropagation(); 
                $(this).parent().siblings().removeClass('open');
                $(this).parent().toggleClass('open');
            });
        });
    })(jQuery);
</script>
</body>

</html>

CSS:

#navigationbar {
    height: 12em;
    width: 60%;
}
.marginBottom-0 {
    margin-bottom: 0;
}
#menubuttons {
    background-color: blue;
    margin-top: 15%;
    padding: 0;
    margin-left: 10%;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
    border-left-color: #555;
}
.dropdown-submenu.pull-left {
    float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
#searchbar {
    float: right;
    margin-top: 10%;
}

Hi, ethanforbes89.

One of the cardinal rules of the forum is that members should not open more than one thread about the same topic. Your previous thread introduced the question about the menu buttons. In this unique case, starting a separate thread/topic would have been the best approach. I would like to recommend that you rush back to the previous thread and delete your last post in which this topic was introduced or edit that last post and indicate that a new thread has been opened about the new topic and give the URL of this topic. That should keep you in good graces without moderator intervention.

I’ll take a look at your code.

2 Likes

I hope you are patient. It looks like your issue will be a learning process for me, too, because when I attempt to open your code in a working page in my browser, I do not see anything like your screenshot in Firefox or Chrome.

The code that you posted looks like it is from your original code that might reside on a server because of what appears to be ASP.NET @calls. Browsers cannot interpret those calls so they display them as text. This is what I see:

If you can post a link to a web page, we can work with that.

If not, then set up the screenshot that you posted earlier and copy and post the HTML code that renders that screenshot by right-clicking the image in your browser window and selecting “View Page Source” or something like that, depends on your browser. That will display the code that the browser is rendering. We also need to be able to find the CSS that is styling the HTML, so the paths to resources need to be full URLs, not local paths, or you need to be sure to include all of the required resources in your post.

The key is simple, if you can click on the code on your computer (not the server or WAMP) and open it in your browser, then it will open in our browsers and we can troubleshoot the code.

Help us help you by giving us code that a browser can open straightaway.

I"m not so sure that this URL is valid
<link href="\stylesheet.css". The leading slash looks backwards. Maybe ASP reads it otherwise? What matters is that the browser sees it in a format that it can interpret.

Also, the ID #menubuttons has been used more than once on the page. IDs can be used only once on a page. Change menubuttons to a classname and it should work unless there is a problem with JS or specificity.

Use the HTML validator frequently. I never leave home wihout it. :tongue:

Using the id multiple times gives me a warning, but it seems to work fine. I’ve done it multiple times without any issues. This is all of the code, there is nothing in the servers at this time, I’m not going to mess with this any further at this time, unless it becomes more of a problem. I was able to just create a unique id for the home button and adjust it into place for now.

Just because it appears to work OK that doesn’t make it right or mean you can make a habit of this. It is invalid html, so cannot be relied upon to always work.
An ID is just that, a unique identifier for a specific element to single it out among all others. The attribute should not be used for any other purpose, as that is it’s sole purpose, regardless of whether the element is being identified by JS, CSS or an anchor.

Also, although an ID can be in a css selector, it’s generally considered bad practice and something to be used sparingly only in special cases when required, due to the high specificity of IDs.
So you should change your IDs to classes, using IDs only once and only when you need to identify a specific element.

5 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.