locked
Razor net core - top banner appears differently in firefox to chrome RRS feed

  • Question

  • User915516305 posted

    Hi,

    Have got a working CRUD application which appears differently in chrome to i.e. in respect of the top banner (i.e home/about/contact appear as expected in chrome and company logo correct size whereas in firefox an inch or so down from top and tiny company logo and have to hit the tint menu to see the home about contact links.

    Anyone any idea how to resolve such that appears correctly in other browsers in addition to chrome?

    Thanks

    Friday, September 13, 2019 8:37 AM

All replies

  • User753101303 posted

    Hi,

    Use F12 tools. You can inspect your markup and see applied styles to understand why the browser renders an element this way. You can even change this live to see to make sure you found what is causing this behavior.

    See https://www.codementor.io/learn-development/javascript-css-html-tutorial-front-end-development-tools or https://developer.mozilla.org/en-US/docs/Tools

    Friday, September 13, 2019 9:15 AM
  • User915516305 posted

    Hi,

    Thanks for reply.

    Have used this to get rid of top part and now company logo shows o.k and at top of page by changing navbar brand 

    However,  still cannot see the home, about contact links despite trying to increase font-size in firefox.  Just shows a tiny menu button which shows them if selected and they appear horizontally rather than vertically.

    Any idea what controls appearance of these? They  shoudl appear in navrbar-brand next to company logo and do in chrome but not in firefox by default.

    .navbar-brand {
    background: url(../images/logo.png) center / contain no-repeat;
    width: 180px;
    height: 40px;
    float: left;
    font: Tahoma;
    font-size: 10pt;
    }
    Friday, September 13, 2019 10:02 AM
  • User753101303 posted

    Looks like a wrong media query ? You have the same appearence in Firefox that you have in Chrome if you resize the browser window to a small size ?

    Else using F12 I sometimes disable styles on the offending element (or surrounding element until it shows as expected) and put them back one by one to find out which one is causing the issue (what if you start by not forcing the width  for your navbar-brand ?)

    Edit: usually in F11 you have a checkbox next to styles which make easy to disable/enable styles to experiment a bit with your design...

    Friday, September 13, 2019 11:02 AM
  • User915516305 posted

    Thanks for suggestion.

    Resizing window no impact.

    Have tried various navbar code and if try certain code appears o.k in firefox or chrome but not both.

    the hamburger menu on the boostrap appears tiny in either browser e.g trying code below appears as tiny next to the brand but same code in below appears o.k. in firefox.

    Do you have a working example of navbar that appears o.k. in firefox and chrome for boostrap 4.3.?

    https://stackoverflow.com/questions/49423983/bootstrap-4-default-navbar-is-not-working

    Tried also below from google but o.k. in firefox but not chrome.

    <nav class="navbar navbar-expand-md navbar-light fixed-top">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#reviews">Reviews</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
    

    <div style="color: #d4d4d4; line-height: 19px; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: #1e1e1e;"></div>

    On development in both firefox and chrome appears o.k with code below.

    However, when publish to server and view the published app on server appears with the tiny hamburger icon in chrome even with commenting out the bit that refs development environment etc.

    Any thoughts as to why this would be?

    !DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <title>@ViewData["Title"] - RazorCRUD</title>
       
    
        <!--environment include="Development"-->
        <environment>
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <link rel="stylesheet" href="~/css/site.css" />
        </environment>
        <!--environment exclude="Development">
            <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.3.1/css/bootstrap.min.css"
                  asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                  asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
            <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
        </environment-->
    </head>
    <body>
    
       <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <!--div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item"><a asp-page="/MULTIPLES/Index">Home </a></li>  
                        <li class="nav-item"><a asp-page="/About">About </a></li>
                        <li class="nav-item"><a asp-page="/Contact">Contact </a></li>
        </ul>
      </div-->
       <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                        <ul class="navbar-nav flex-grow-1">
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-page="/MULTIPLES/Index">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-page="/About">About</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-page="/Contactt">Contact</a>
                            </li>
                        </ul>
                    </div>
    
    
    
    </nav>
    
        <partial name="_CookieConsentPartial" />
    
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; 2019 - Maintain Multiple</p>
            </footer>
        </div>
    
        <environment>
        <!--environment include="Development"-->
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
            <script src="~/js/site.js" asp-append-version="true"></script>
        </environment>
        <!--environment exclude="Development">
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
            </script>
            <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.3.1/bootstrap.min.js"
                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                    crossorigin="anonymous"
                    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
            </script>
            <script src="~/js/site.min.js" asp-append-version="true"></script>
        </environment-->
    
        @RenderSection("Scripts", required: false)
    </body>
    </html>
    

    Monday, September 16, 2019 11:22 AM