The browser has disregarded a CSS rule

Hey there, I have a question that may seem silly, but I just can't seem to find the answer anywhere.

Please take a look at this fiddle:

I need to remove #Navigation in the CSS declaration below:

#Navigation .stretch {
...
}

so it should look like this:

.stretch {
...
}

Why is the browser (chrome Version 26.0.1410.64 m) ignoring this rule?

I've also tested it on Firefox with the same result.

It doesn't seem to be a CSS priorities issue, as both DevTools and FireBug aren't showing it, not even crossed out.

Thanks!

EDIT: Thank you so much everyone! I couldn't see those crossed rules before, I spent over an hour scrolling through DevTools and FireBug trying to figure out such a "simple" problem.

cssbrowser

Answer №1

The rule that is defined with only the selector .stretch is considered less specific than #navigator li, resulting in it not being applied even if it is defined later on in the cascade. This means that the display will always be inline.

Answer №2

Instead of being ignored, the style is actually overruled by the #Navigation li selector which is more specific. This sets the display property to inline instead of your desired inline block.

You can quickly identify this by using the 'inspect element' feature in Chrome. It will display the styles applied to the element and strike through any overruled styles.

Answer №3

An issue arises because the specificity of #Navigation li is higher than that of .stretch due to the presence of an id selector.

You may not be able to see it because the element is empty, and you might have selected the previous element (on a jsfiddle code).

If you inspect the empty li using firebug, you'll see that it is being overridden.

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 add child elements to the parent element when the height limit has been reached?

This is the code I've been working on: <ul style="height:200px;width:100%;"> <li>Hi</li> <li>Hi</li> <li>Hi</li> ... (add more items here) </ul> Here is a preview of how it currently looks: ...

htmlcss

Two pictures, one adjusting in size and one staying the same size

I am working on a design with an 800px wide div that contains side-by-side images - one photo and one map. The challenge I am facing is that the map, which is 300px in width and has intricate details, becomes unusable when resized for smaller screens. I wa ...

htmlcssresponsive-designimage-resizing

Flask does not provide a direct boolean value for checkboxes

After struggling for a week, I am still lost on where to make changes in my code. I need the checkbox to return a boolean value in my Flask application. Below are snippets of the relevant code: mycode.py import os, sqlite3 from flask import Flask, flash ...

javascriptpythonhtmlcssflask

Transferring information from template to associated component

Is it possible to transfer data from a template to a component without the need for an event trigger like a button or form submission? For instance, in the code snippet provided, how can we pass the 'item' from the 'items' array to the ...

htmlcssangular

How can I make Material UI's grid spacing function properly in React?

I've been utilizing Material UI's Grid for my layout design. While the columns and rows are functioning properly, I've encountered an issue with the spacing attribute not working as expected. To import Grid, I have used the following code: ...

javascriptcssreactjsmaterial-ui

Clickable link remains functional after being hidden

Even though I have hidden the Games-div using the .hide() function in jQuery, my links are still clickable. Is there a way to make them unclickable after being hidden? Here is the link to my code on jsFiddle: http://jsfiddle.net/hypertje/Frv8G/ Note: The ...

jqueryhtmlcss

A guide on updating the appearance of a list of comma-separated tags using HTML, CSS, and jQuery

Is there a way to replicate the functionality of the tag section on this website for creating question entries? How can this be achieved? ...

jqueryhtmlcss

Is it possible to dynamically alter a CSS property using styled components when an onClick event occurs?

Hey there, I'm pretty new to React and currently exploring styled components for the CSS styling of my components. One of the components I've created is a button called SummonButton: const SummonButton = styled.button` height: 50px; borde ...

javascriptcssreactjsrxjsstyled-components

Keep the link underlined until a different button is pressed

I need help with a webpage that displays a list of partners organized by categories. When clicking on sidebar categories, the link remains underlined. However, if you click anywhere else on the page, the link becomes inactive. CSS: button:hover { t ...

javascriptjqueryhtmlcss

Can ASP.NET be used to universally prevent all cookies (including third-party cookies) from being stored when a user visits my website?

The issue at hand revolves around the highly anticipated EU Privacy regulation, which prohibits websites from placing any "non-essential" cookies without the user's explicit consent. My current dilemma stems from the intricate nature of the website a ...

asp.netiisbrowsercookies

I'm struggling to make the jquery parentsUntil function work properly

Would appreciate some help with using the jquery parentsUntil method to hide a button until a radio box is selected. I've been struggling with this for a few days now and can't seem to figure out what I'm doing wrong. Any insights would be g ...

javascriptjqueryhtmlcss

Issue with Firefox translateZ causing only half of the content to be visible on initial load in Pure CSS Parallax configurations

Recently, I've been experimenting with creating a parallax website and have been following the helpful steps outlined by Keith Clark. However, I've run into an issue that seems to be specific to Firefox. Upon loading the site, I noticed that the ...

htmlcssparallax

What is the best way to showcase all tab content within a single tab menu labeled "ALL"?

I have created a tab menu example below. When you click on the button ALL, it will display all the tabcontent. Each tab content has its own tab menu. Thanks in advance! function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = doc ...

javascripthtmlcsstabs

What is causing this regular expression to not find any matches in the VSCode search and replace function?

Currently utilizing VSCode for my code editing needs. https://i.sstatic.net/49OmA.png Displayed below is a screenshot illustrating the search options I have chosen: https://i.sstatic.net/ILcNv.png The regex expression I'm attempting to use functio ...

cssregexvisual-studio-codehtml-email

Update the header background color of an AG-Grid when the grid is ready using TypeScript

Currently working with Angular 6. I have integrated ag-grid into a component and I am looking to modify the background color of the grid header using component CSS or through gridready columnapi/rowapi. I want to avoid inheriting and creating a custom He ...

cssangulartypescriptag-grid

Ways to correct the issue of multiple <div>s overlapping each other after being rotated by 90 degrees

Can someone assist me with rotating multiple divs without them overlapping? Below is a simplified version of my code: <div> <div class="rect"></div> <div class="rect"></div> <div class="rect"></div> & ...

htmlcss

Tips for adjusting HTML files prior to HTMLOutput in Google Apps Script

I'm looking to make some changes to an HTML file within the doGet() function before it's output in HTMLOut. However, I'm running into an issue with the <?!=include('css').getContent();?> code snippet, as it can't be exec ...

javascriptcssgoogle-apps-script

Utilizing dynamic attributes in design with bootstrap and CSS. Our capabilities are limited in executing actions through selenium

https://i.stack.imgur.com/Bwbgh.jpg Upon reviewing the code snippet above, I have made an attempt to locate elements and execute actions in Selenium. Actions action = new Actions(driver); Initiating Control on Elements WebElement we = driver. ...

cssselenium

Accordion jQuery failing to display tabs

I have a question about using 2 jQuery accordions with tabs inside them. Everything seems to be working, but when I try to expand the second accordion, the two tabs inside don't render properly. I'm not sure what the issue is. Any help on this wo ...

javascriptjquerycss

Is it possible for Carousel to showcase a different layout other than tables or items? And is there a way to customize

I'm trying to use Bootstrap 5 to display items in a row, like sets of 3 or 12, and have them slide into view one set at a time. However, when I add a carousel, the items end up stacked on top of each other. Here is the code snippet: <div c ...

htmlcsscarouselbootstrap-5