What could be causing the inability of select:-moz-focusring to eliminate the dotted lines in the Firefox browser on this bootstrap navigation

Is there a way to remove the Firefox dotted lines from my bootstrap navigation bar?

I've come across suggestions to add the following code snippet to the CSS file:

a:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #000;
    }
    

Despite adding the above code, the lines still persist in the following HTML. Can anyone explain why?

<html ng-app="mainApp">
    <head>
        <style type="text/css">
            [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
                display: none !important;
            }    
            select:-moz-focusring {
                color: transparent;
                text-shadow: 0 0 0 #000;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />
    </head>    
    <body ng-cloak ng-controller="mainController">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <div class="navbar-brand">AngularJS Routing</div>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                        <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                        <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="col-lg-12">
            <div ng-view></div>
        </div>        

        <script>
            var mainApp = angular.module('mainApp', ['ngRoute']);
            mainApp.config(function ($routeProvider) {
                $routeProvider
                        .when('/', {
                            templateUrl: 'pages/home.htm',
                            controller: 'mainController'
                        })
                        .when('/about', {
                            templateUrl: 'pages/about.htm',
                            controller: 'aboutController'
                        })
                        .when('/contact', {
                            templateUrl: 'pages/contact.htm',
                            controller: 'contactController'
                        });
            });
            mainApp.controller('mainController', function ($scope) {
                $scope.message = 'the home page';
            });
            mainApp.controller('aboutController', function ($scope) {
                $scope.message = 'the about page';
            });
            mainApp.controller('contactController', function ($scope) {
                $scope.message = 'the contact page';
            });
        </script>
    </body>
    </html>

Answer №1

If you want your code to function correctly, it is advisable to use the standard :focus pseudo-class instead of the non-standard :-moz-focusring unless there is a specific reason to do so:

a:focus {
    outline: none;
}

The properties color and text-shadow affect text rather than the focus outline, so they will not have the desired effect. Even MDN does not provide examples using these properties, opting for outline instead. Ultimately, sticking with :focus is recommended.

The main issue lies in including Bootstrap after your <style> elements. Bootstrap contains an a:focus rule that applies the focus outline, overriding your CSS as it is included later. Reordering the elements will resolve this problem:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />

<style type="text/css">
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }    
    a:focus {
        outline: none;
    }
</style>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

In general, it is best practice to place any <link> and @import statements before <style> elements to avoid unintended overrides by linked stylesheets (regardless of specificity).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML text-indent is a way to add extra space to

I cannot understand why my text is not indenting properly. At the very bottom left corner, the "Educational Specifications" text is enclosed within a p element as follows: <p style="text-indent: 3em">Educational Specifications</p> Why doesn& ...

Fine-tuning the design of the Box Model layout

I can't seem to get the table in my code to center properly and not be stuck against the left border. Despite trying various solutions, the table in column 2 is floating off to the left and touching the border. I need it to be more centered within the ...

The HTML grid is causing an irritating excess space on the right side of my website

After brainstorming an idea, I decided to create this website for testing purposes. However, the grid layout seems to be causing an unwanted margin on the right side of the page that is not associated with any HTML tag, disrupting the zoom functionality. ...

What is the best way to show emojis in AngularJS?

Recently starting to work with angularjs, I've incorporated "emoji-min.js" and "emoji-min.css" into my project as an attempt to display emojis within a text field. Despite my efforts, the emojis are not displaying as intended. Here is a snippet of my ...

Create custom styles for Android applications using CSS or themes programmatically

As I work on developing an application, I am interested in implementing a unique approach... To retrieve a CSS file from the server and apply it to the activity layout. To create a string file for styling or theming and integrating it into the layout. I ...

From where was this color of the navigation bar derived?

As I delve into a site previously worked on by someone else, my task is to recreate the navigation they implemented. However, I am unable to locate in the source code what was used for the navigation background. The challenge lies in the fact that after m ...

Elements not following percentage in top positioning

I am facing an issue with resizing containers on my webpage. Despite using position: relative for everything, I am unable to properly adjust the size of the top containers using percentages. Any assistance would be greatly appreciated! ...

I am encountering issues with the ng-bootstrap drop down menu not functioning properly when used in conjunction with *ng

The dropdown menu is designed to dynamically populate a selection of languages. I attempted to use ngFor to achieve this, but only the first item in the list appears in the dropdown menu. <nav class ="navbar navbar-light bg-light fixed-top"> &l ...

Ways to showcase INPUT TYPE when making a Selection?

I've been struggling with a simple issue and despite trying multiple solutions, I can't seem to get it right. I have a form where I'm using the <select> tag with two options: coo and uh. What I want is for an additional input type fiel ...

Issues with loading AngularJS prototype app page after clicking one link

As a newcomer to AngularJS, I am experiencing some strange behavior in a single page app prototype I am working on. When I select a link from the navigation, subsequent clicks only load the page if the _blank attribute is set. What could be causing the pag ...

Floating point expansion caused by the addition of padding

Currently working on a basic 2 column layout design for a website, but ran into a hiccup. Whenever I try adding padding to the left-floated column, it ends up expanding beyond the width that I have set. Unfortunately, I haven't been able to find a sol ...

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

Tips for aligning an image to the left inside a paragraph

Currently working on my ecommerce store homepage, placed just below the carousel is an image with the heading "I Wish I Were Knitting..." accompanied by a paragraph that seems to be wrapped around it. I have added a float class to the image tag within the ...

Using a video as a background in HTML

My code has an issue where I have set overflow: hidden in the CSS but the video is still not displaying below the text as intended. The relevant CSS snippets are: fullscreen-bg { top: 0; right: 0; bottom: 0; left: 0; overflow:hidden ...

Error is being thrown when Angular directives are called before the data/token is available

One of the main tasks in my app is to authenticate the user and obtain a token using a service. Currently, this service is being used in the mainController which is attached to the body element in index.html. It's crucial for this authentication proc ...

How come the width of an element with a relative position remains maximized even when it does not have any child elements?

I am facing an issue with a "message" element that needs to be resized if the text exceeds its width within certain limits, similar to how it works in messaging applications. .message { position: relative; color: white; background: #182533 ...

Issue with the position of the search dropdown in HTML

When we click on the Dropdown option, it appears above the text instead of below. I have been trying to fix the positioning issue where the Dropdown shows up separately after clicking, but I have not been successful so far. Maybe you can offer some assist ...

Utilizing the retina pixel ratio media query in Internet Explorer 8

I'm currently working on a project to develop a responsive website using SASS/Compass, and I am incorporating retina icons by utilizing generated sprites. In my .scss file, I have created a mixin for including these icons. Here is my mixin for retina ...

Dynamic Visualizations with D3.js: Live Charts for Real-Time

This is my first time using D3.js and I am attempting to create a basic sparkline graph. The graph should have time on the X-axis and numbers up to 1000 on the Y-axis. I have a web socket server that sends random numbers up to 1000 to clients. My goal is t ...

Uploading Files Larger than 5MB on AWS Using Node.js

I have been utilizing this module to upload files to Amazon. The module can be found at https://www.npmjs.com/package/streaming-s3 and it works perfectly for files that are 5 MB or less. However, when I attempted to upload a PDF file that was 6 MB in size ...