Inconsistencies in text color appearance in CSS between Firefox and Safari

I am facing an issue that I cannot quite decipher and solve.

The design includes a Bootstrap Sidebar with menu titles in <h5> tags along with submenus.

The titles have a background-color of #454545 and the text color should be white.

While everything appears as expected on Firefox, Safari seems to have trouble displaying the text color correctly. Changing the text color only affects the glyphicon color.

HTML

<ul class="list">
  <li style="list-style: none; display: inline">
    <h5><strong><span class="glyphicon glyphicon-file"></span> Actes Etat Civil</strong></h5>
  </li>
  <li>
    <a href="{%%20url">Fiches Identités</a>
  </li>
  <li>
    <a href="{%%20url">Actes de Naissance</a>
  </li>
  <li>
    <a href="{%%20url">Actes de Reconnaissance / Adoption</a>
  </li>
  <li>
    <a href="{%%20url">Actes de Mariage</a>
  </li>
  <li>
    <a href="{%%20url">Actes de Divorce</a>
  </li>
  <li>
    <a href="{%%20url">Actes de Décès</a>
  </li>
</ul>

CSS

.list > h5 {
    color : white;
    padding: 2% 0% 2% 5%;
    background-color: #454545 !important;
    font-size: 25;
}

Screenshot from Firefox :

https://i.sstatic.net/qVM99.png

Screenshot from Safari :

https://i.sstatic.net/bUSfH.png

htmlcssfirefoxsafari

Answer №1

It appears that your selector is not accurately targeting your desired element, as the h5 falls within the li.

To correctly select the heading, you will need to modify the selector like this (I have included > li):

.list > li > h5 {
    color : white;
    padding: 2% 0% 2% 5%;
    background-color: #454545 !important;
    font-size: 25;
}

In my experience, this code behaves consistently across Firefox, Chrome, and Safari.

The glyphicon may have its own styling defined elsewhere to ensure it displays in the correct color.

Answer №2

After experimenting with the strong parameter, I was able to find a solution:

.list > h5 > strong {
        color : white;
        padding: 2% 0% 2% 5%;
        font-size: 15px;
    }

    .list > h5 {
        padding: 2% 0% 2% 5%;
        background-color: #454545 ;
    }

The solution appears to be effective with both Safari and Firefox browsers.

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

What is the best way to incorporate spacing between elements in Selenium?

Utilizing Selenium, I attempted to extract data from a table on a webpage. The HTML structure is as follows: <table> <tbody> <tr> <td> <span>1</span> <span>0</span> ...

c#htmlselenium

challenges arise when using star icons to rate items visually, as the corresponding hidden values for backend processing are linked to radio input types

Hello, I am trying to retrieve the value of an input type radio by clicking on a star image visually. I have been successful in this, but I am having trouble resetting the star image in another row. You can view a demo of this here. I will explain what I ...

jqueryhtmlcssdefault-valuerating

Navigation links can become stacked when the page is zoomed out

Currently working on a website using html and css. I have managed to create a navigation bar with links, but the issue arises when I zoom out - the links stack on top of each other rather than staying in line. Any guidance or tips would be greatly apprecia ...

htmlcssnavigation

Issues with `Float:left` not functioning as expected on a div with dynamically changing

I'm currently working on setting up a base div that I can easily duplicate whenever I need to add new content to my website. Here's how the initial HTML structure looks: <div class="post"> <p class="date">17/03/1014</p> <h1& ...

htmlcss

The third error states that "scene" is not a valid function

Getting an error while using three.js and the code snippet below is throwing the following error message: Uncaught TypeError: THREE.Scene is not a function init @ new 1.html:18 This error occurred on this specific line of code: scene=new THREE.Scene(); ...

htmlthree.js

HTML's dynamic content lacks the ability to scroll

I'm encountering an issue with my HTML page that contains a lot of PHP content, such as menus and product boxes. The problem is that the entire content seems to be frozen and won't scroll. I have tried setting the CSS property for overflow-y to ...

phphtmlscrolloverflow

Issue with ul under li:hover not displaying correctly in IE browser, despite the box shadow still being visible

I'm dealing with a navigation menu that has nested ul li elements. The goal is to have the nested ul displayed only when the parent li element is hovered over. ul#menu_system ul { width:200px; display:none; position:absolute; left:0; top:100%; -moz-b ...

cssinternet-explorer

What is the best way to link various stylesheets to a Rails project?

In my project, I have a main stylesheet called application.css included in the layout file layouts/application.html.erb: <%= stylesheet_link_tag "application" %> However, there is a specific section of the website where I want to use a different st ...

ruby-on-railscss

Unable to retrieve the $POST value

Upon submission, I should receive an alert with certain values but they appear blank. The alert is displayed, however, the values do not show up. This issue is part of a simple debugging process that I use to verify the correctness of the values. When usi ...

phphtml

The page appears to be too wide for its intended dimensions

Currently, I am developing a single-page website located at . The issue I am facing is that the page appears larger than 100% despite there not being any code elements causing this distortion. To create this website, I am utilizing PHP for fetching Faceboo ...

phpjqueryhtmlcss

PHP method that invokes HTML code

I recently developed a registration and login system using object-oriented PHP. I am now looking to make the HTML code accessible from within a PHP method. Below is the View.php class that contains methods for creating the login and registration UI: < ...

phphtml

Utilizing Angular Material Table with a distinct header row for every table row

Looking for help with creating an Angular Material table that includes a header for every other row. Here is a basic sketch to illustrate: https://i.sstatic.net/kpptk.png Using separate tables seems like the best approach, but it may lead to a messy layo ...

htmlangulartypescriptangular-materialangular-material-table

An issue occurred: TypeError - Unable to access the 'subscribe' property of an undefined object during a POST HTTP request in Angular [8]

I'm currently attempting to send data to a REST API using Postman. I am encountering an issue where I receive the error "Cannot read property 'subscribe' of undefined" when making a POST HTTP call, as shown in the console log: https://i.sta ...

javascripthtmlangularangular8

"Enhance your website with a creative CSS3 effect: rotating backgrounds on

Greetings, fellow coders! #div1{ position: fixed; top: 50%; left: 50%; margin-left:-100px; margin-top: 420px; width: 158px; height: 158px; background-image:url(imag ...

animationcssbackgroundrotationcss-transitions

When the Jqueryui dialog is closed, it effectively terminates the current JavaScript thread

Hello there, I'm currently facing an issue with closing my jQuery dialog box. The situation involves a comet connection that sends messages to my browser. My goal is to perform certain actions upon receiving a message, close the dialog, and then conti ...

javascriptjqueryhtmljquery-ui

Checkbox click event not triggering properly

I am facing challenges in triggering an onclick event for the "Elevation" checkboxes located at the URL provided above. <input type="checkbox" value="A" id="elevation_A" onclick="changeElevation(this.value);" /> For some reason, the "changeElevati ...

javascriptjqueryhtml

The jQuery find and replace feature is causing my entire content to be replaced instead of just specific paragraphs

Within this section, there are multiple paragraphs and an input field. The concept is simple: the user inputs text into the box, then hits "ENTER" to trigger a jquery function below. The process involves identifying matches between the paragraph content a ...

javascriptjqueryhtmlcss

Using Regular Expressions (or not) in Javascript/Jquery to append <span> around vowels

Seeking guidance as a beginner in the coding world. Currently, my code generates numbers from 1 to 99 and displays text next to the number based on certain conditions. For instance, numbers divisible by 3 are labeled 'Java', those divisible by 5 ...

javascriptjqueryhtmlcssregex

The style of CSS remains constant within the JSP file

Having trouble updating styles on a JSP page using CSS. Here is the code snippet for linking: <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/Profile.css" /> Initially, the styling wo ...

javacssweb

Attempting to develop a search feature for a multi-layered array using JavaScript

I've been attempting to search through a multidimensional array in JavaScript, but I'm facing some issues. Specifically, I am looking to input the first number from one of the 3 rows and retrieve the entire row. Essentially, my goal is to extract ...

javascripthtmlarrayssearchmultidimensional-array