I'm currently working on a webpage where I want to add a list of links that resemble tabs. While this style is functioning correctly for the main pages, I'm having trouble implementing it for a new section.
The existing list is located within:
<body class="shadowbox">
<div class="full">
<div class="banner">
<div class="tab-header">
consisting of multiple sub-divs creating the tabs and filler content.
Despite my attempts to define the font-family under "tab-header", it continues to inherit from "banner" upon inspecting the element.
The new link list is situated in another segment of the page:
<body class="shadowbox">
<div class="full">
<div class="main">
<div class="centre">
<div class="about shadowbox">
<div class="tab-header">
This section also involves multiple sub-divs for tabs and filler text. Once again, investigating the element reveals that the font-family is derived from "main a" rather than "tab-header". No matter where I apply the font-family property within the CSS file, the result remains consistent.
After experimenting with a CSS definition for "tab-header a", the font family setting successfully overrides the initial "banner" definition for the first set of tabs. However, the second set continues to rely on "main a" for its font styling.
In an effort to address this inconsistency, I've specified the font family directly within the individual link tags, which has proven effective. Unfortunately, assigning a class like "tab-link" to control the font-family at a broader level has not yielded the desired outcome.
These challenges persist across different browsers, leading me to question my understanding of CSS hierarchy. I had anticipated that more specific nested values would supersede global ones, but this doesn't seem to be the case here.
If anyone can offer insights or suggestions on how to resolve this issue, I would greatly appreciate it.