Problem: Whenever the logo is clicked, a black bar appears below it in both Firefox and Chrome. Holding down on the logo makes the black bar stay.
Below are some of the attempts made to remove the black bar when focused on:
a:active, a:focus {
outline: none;
}
a {
outline: none;
}
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
a img {outline : none;}
img {border : 0;}
Any insights on what might be causing the appearance of the black bar?
The root cause behind this issue lies in the code written on line 45 of screen.css, where there is a rule stating "background-color: #000 !important;" which is impacting the styling of a.coa-link (Your rule is designed to impact a:focus, a:active, and other states). This explains why the problem only arises when you click or hold-click on the link [placing focus on the element].
To resolve this, simply insert the following code into line 35 of style.css:
#header a.coa-link { clear: both; /* PREVIOUS CODE */
background-color: transparent !important; /* NEW ADDITION */ }
By making this adjustment, the issue should be resolved.
Hoping this helps!
To achieve a cohesive look, consider changing the background color of the .coa-link class to match the RGB values of your body element's background color, which are rgb(43,66,114).
Strangely enough, I encountered a peculiar issue but found a solution by enclosing the image within a div:
<a class="coa-link" href="/" title="Home">
<div>
<img src="/files/2012/07/AC-banner-white-test7.png" alt="">
</div>
</a>
This simple workaround resolved the problem for me when using the chrome inspector.
The issue you are experiencing is due to the implementation of focus styles for <a> tags. The black bar appearing is a result of the missing display: block; in the CSS for the <a> surrounding the logo image. If this style rule were included, the entire header would display a black background.
Another complication arises from the use of an !important declaration within the code.
To resolve the black bar appearing in your logo link, you should apply the following CSS fix:
#header .coa-link a {
display: block;
}
#header .coa-link a:focus,
#header .coa-link a:active, {
background: transparent!important;
}
While it is not recommended to rely on the !important declaration in CSS, if it has already been used, you must override it. Ideally, remove the !important tag indicated in the accompanying image to avoid its necessity in the solution.
I am attempting to populate a pie chart using JSON data retrieved from restcountries.eu/rest/v2/all. I use $.getJSON to fetch the data, create a temporary array as the data source, and then bind it to the pie chart. However, I seem to be encountering an er ...
Image for the Question Is it possible to create a zoom functionality using only HTML and CSS, without relying on JavaScript? I need this feature for a specific project that doesn't support JavaScript. ...
I've been doing some research on fonts for my website, and I've come across various formats available. Now I'm curious about what the standard format is or if there are multiple standard formats. .TTF (True Type Font) .EOT (Embedded OpenTyp ...
I'm having trouble inserting a view into my index.html using $routeProvider and ng-view from the AngularJS libraries. Can anyone assist me in figuring out why it's not being inserted? Below is the code for my index.html, views, and app.js files: ...
I'm encountering a common issue with the jQuery datepicker where it's displaying behind a dropdown box. I've tried implementing the solutions provided in this thread: Trouble with jQuery Dialog and Datepicker plugins However, these solutio ...
I found this code example here and decided to implement a collapsible panel using css/html/javascript: function toggleCollapsibleSectionWithAnimation() { this.classList.toggle("collapsible-active"); var buttonId = this.id; var sectionId = buttonId ...
You have a button that triggers a pop-up window <a data-dialog="AddProduct" href="@Url.Action("AddProduct", "Outputs")" id="addproduct" class="pop-up-window btn btn-success">Add Product <span class="glyphicon glyphicon-plus-sign" aria-hidden= ...
Is there a way to create space between the four divs in the image below? https://i.sstatic.net/xHzbF.png As shown in the image, there are four divs aligned next to each other. The code for each individual div is: <div class="col-lg-3 col-md-4 co ...
Can you arrange 3 table rows to display inline, so that after every 3 rows the table will automatically start on a new line and continue like this indefinitely? <?php $addon_name = $_SESSION['Add_On_OpName']; mysqli_report(MYSQLI_REPORT_INDEX ...
My website is experiencing a strange issue with an animated counter. The counter works fine on desktop browsers, but when viewed on mobile devices in a live setting, it seems to have trouble parsing or converting numbers above 999. This results in the init ...
One interesting aspect of Bookdown is its built-in feature that automatically highlights in blue the section in the sidebar that you are currently scrolling past or reading. However, I'm having trouble changing the color in the style.css page. Using a ...
Lately, I've been trying to simplify things by consolidating my JavaScript functions into one file instead of using multiple separate files. The idea was to merge all the functions together and wrap each one in its own function so that they can be eas ...
I have the following HTML source code for a Bootstrap card: <div class="card shadow-none card-fluid mb-3 mb-md-5"> <div class="row"> <div class="col-md-3 col-lg-3 mb-3 mb-sm-0"> <img class="img-fluid rounded" ...
I have a form in Rails that includes a text area. The issue is that the text area can be resized by the user, which I do not want. How can I prevent the user from resizing it? <%= form_tag "doit", :id => "doit_form" do -%> Names <br/& ...
I have successfully achieved the desired result from top to bottom using the code snippet below: /* I want to fill with a solid color, but in order to partially fill the background, I found that I needed to use a dummy gradient to achieve the desired ef ...
I'm trying to make my horizontal navigation bar stay at the top of the screen. The issue is that when I set the top property to 0, the menu sticks to the top but the initial menu item is obscured when hovered over. If I remove the top property, the ho ...
When creating a table, I need to insert values. While most values are plain, some require their decimal values to be displayed. To remove all decimal values, I am utilizing the formatDecimal function. <td th:each="dayWorked:${metier.getUserDayWorked(u ...
My question involves an empty link: <a href="#" id="stop-point-btn">+ add stop-point</a> This link is connected to a JavaScript function: $("#stop-point-btn").bind("click", addStopPoint); The JS function simply inserts content into a specif ...
Hamlit is a unique variation of Haml. According to the creator, it boasts a performance that is 2.39 times faster than traditional Haml. What is the process for utilizing Hamlit? Is it similar to Haml in terms of usage and syntax? Will I need to change th ...
I am trying to make the progress bar expand from 0% width to 50% width in a span of 2 seconds. Here is the code I have written: <style> #progressbar { background-color: #000000; border-radius: 8px; padding: 3px; width: 40 ...