Addressing duplicate CSS issues in Firebug?

CSS:

.list-a .desc-fix {
    width: 180px;
    margin: 0px auto;
    position: relative;
}
.list-a .desc {
    background: url("../images/trans_black.png") repeat;
    display: block;
    font-family: arial;
    font-size: small;
    height: 18px;
    margin: 3px 0 0 50px;
    overflow: hidden;
    padding: 10px;
    position: absolute;
    width: 180px;
    z-index: 3;
    right:30px;
    left:30px
}

HTML:

<span class="desc-fix">
    <span class="desc">
        <h4>Text A</h4>
        <h5>Text B</h5>
    Long text long text long text Long text long text long text Long text long text long text Long text long text long text Long text long text long textLong text long text long text Long text long text long text
    </span>
</span>

The above code is used to center an absolutely positioned span.

However, when the page loads it does not appear centered as intended.

Strange behavior is observed where editing and then reverting back the CSS in Firebug results in the element being centered. Any insights into this issue?

htmlcssfirebugcss-positioncenter-align

Answer №1

Why not attempt using the code below, enclosing those span elements within a class? Take a look at this JSFiddle link

.list-a .desc-fix {
    width: 100%;
    height: 100%;
}
.list-a .desc {
    background: url("../images/trans_black.png") repeat;
    display: block;
    font-family: arial;
    font-size: small;
    margin: 3px 0 0 50px;
    padding: 10px;
    max-width:300px;
    max-heigtht: 400px;
    width: 100%;
    height: 100%;
}
.list-a {
    width:300px;
    height:400px;
    margin: 0px auto;
}

Answer №2

It is recommended to always associate your css classes with their immediate parent element, for example:

.list-a span .desc-fix {)
.list-a span .desc {)

Alternatively, you can also use the following simpler approach:

span .desc-fix {}
span .desc {}

Have you tested if it functions correctly in various web browsers?

UPDATE: You may find this resource helpful

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 ensure a dropdown menu stays visible while navigating through various If/Else blocks?

I am fairly new to working with PHP and MySQL, so I have been using the mysql_* functions despite knowing that they are no longer supported. However, I can't seem to find anyone else who has had a similar question to mine, which is why I am reaching o ...

phphtmlmysql

Element that hovers and floats

Just last week, I was working on coding a custom menu bar for my blog located at . However, when it came to adding social buttons, things went awry. It seemed like a float element issue! Despite my attempts to resolve it by adjusting widths and properties, ...

htmlcss

The search functionality in an Html table is currently malfunctioning

Currently, I am working on developing a search mechanism in HTML. It seems to be functioning properly when searching for data for the first time. However, subsequent searches do not yield the expected results. Additionally, when trying to search with empty ...

javascriptjqueryhtml

Several radial progress charts in JavaScript

While attempting to recreate and update this chart, I successfully created a separate chart but encountered difficulties with achieving the second progress. The secondary chart <div id="radial-progress-vha"> <div class="circle-vha ...

javascriptjquerycssprogress-barprogress

Replace the css variables provided by the Angular library with custom ones

Having an angular library with a defined set of css variables for colors applied to components, which are globally set like this: :root { -color-1: #000000; -color-2: #ffffff; ... } In my application utilizing this library, I need to override ...

htmlcssangular

JQuery - Triggering mouseenter/hover event only on top-level menu items, excluding the nested submenu items (list items that are not within nested lists)

I have a complex navigation menu structure with nested lists, and I'm struggling to trigger an event only on the top-level items when hovered. Despite trying different jQuery selectors and methods, such as using the NOT selector or targeting direct ch ...

javascripthtmljquerycss

Ways to display HTML code on a webpage

As part of my internship, I am tasked with creating a WYSIWYG editor that can incorporate logic such as if-statements and loops. While there are existing WYSIWYG editors available, none of them seem to support this type of functionality. I am seeking tech ...

htmlweb

How can I prevent CSS styles from affecting all the tables on my website?

One issue I'm facing is that the CSS code intended for one table is affecting all the other tables on my website. Here is an example of the CSS code: tr:last-child td:last-child { border-bottom-right-radius:3px; } /*effects map*/ td { background: ...

htmlcss

In Internet Explorer 10, it is not possible to access the document.links using the link's id; it can only be accessed using the

Why does the following code work in FireFox 23.0.1 and Chrome 29, but not in IE 10? <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function loadFile1(){ a ...

javascripthtml

Bootstrap-tour is incompatible with a row within a table structure

Is there a way to highlight a table row effectively? I've been struggling with it and tried using the fix mentioned in this bootstrap-tour issue here Check out this demonstration on jsFiddle: jsFiddle JAVASCRIPT $("#dialog").dialog(); var t = new ...

javascriptcsstwitter-bootstrapz-indexbootstrap-tour

CSS swapping versus CSS altering

Looking to make changes to the CSS of a page, there are two methods that come to mind: Option 1: Utilize the Jquery .css function to modify every tag in the HTML. For instance: $("body").css("background : red") Alternatively, you can disable the current ...

javascriptjquerycss

What is the best way to maintain the height of a background image while cropping it horizontally and resizing the browser?

My code looks like this:- HTML <div id="header-main"></div> CSS #header-main { background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/planet-bg.jpg); background-position: center; background-size ...

htmlcss

Combining Content, Attr, and Url in a single statement

I've been utilizing the content attribute for quite some time now, but today I decided to explore something different. Instead of relying on JS to show an image tooltip, I was curious if it could be done dynamically using CSS. So I attempted the foll ...

cssurlattrcss-content

The footer is not displaying the background image properly

Currently in the process of creating my website. I've successfully added my banner and footer, but unfortunately, I'm facing an issue with the background. It seems to not be stretching out properly, leaving some empty white space. Click here to ...

htmlcss

What is the best way to add a dropdown menu in front of a button?

I have a div containing a dropdown list of items and I want the user to be able to add more dropdown lists by clicking a button. Although I managed to do this, the issue I'm encountering is that the new list gets added after the button instead of ben ...

javascriptjqueryhtmldom

Focusing on a specific image using Jquery

I am looking to specifically target the image within the "hero1project3" class, however, the image is currently set as a background. Is there a way in jQuery to apply effects like blur only to the image itself, for example, using ".hero1project3 img"? HTM ...

javascriptjqueryhtmlcss

Can the text inside a div be styled to resemble h1 without using an actual h1 tag?

Is it feasible to apply the h1 style to all text within a div without utilizing tags? For instance: <div id="title-div" style="h1">My Title</div> Or a potential solution could be: #title-div { style: h1; //Imports all s ...

htmlcss

What are the steps in creating a responsive UI with CSS?

How can I create a responsive UI using css for the following code snippet? <Text className="w-100 mt-0 align-self-center"> Lorem ipsum Lorem ipsum Lorem ipsum<span>{'$200'}</span> </Text> <Text classNam ...

htmlcssreactjsresponsive-designbootstrap-5

When the next button is clicked, the button content disappears

I am struggling with a problem involving two buttons that store tables. The issue is, I want the table to disappear when the second button is clicked and show the contents of the second button immediately after clicking it once, rather than having to click ...

javascripthtmlcssbuttonsvg

Is there a way to use jQuery to load a ul from a different webpage into a div?

Progress is being made as I work on making two nearly identical pages function seamlessly together. One page features an alphabet list, and when a letter is selected, the other page filters results (last names from a PHP database query) and displays them o ...

phpjqueryhtml