HTML elements with various characteristics, yet all belonging to the same class, are exhibiting peculiar behavior

I am currently in the process of developing a website that showcases various pages detailing fictional characters and locations. These pages are divided into categories, each featuring a profile box containing a heading, an image, and a summary table.

Here is an example of the HTML structure for such a box:

<profilebox class="red">
  <p><i>His Majesty</i><br><span class="big-and-strong">The King</span>
  </p>
  <figure class="pbox"><img class="pbox" src="../images/armsroyal.svg"> 
  </figure>
  <table class="pbox">
    <tr>
      <td>Surname</td>
      <td>N/A</td>
    </tr>
    <tr>
      <td>Forename</td>
      <td>N/A</td>
    </tr>
    <tr>
      <td>Rank</td>
      <td>King</td>
    </tr>
    <tr>
      <td>Addressed As</td>
      <td>&lsquo;&lsquo;Your Majesty&rsquo;&rsquo;</td>
    </tr>
  </table>
</profilebox>

The corresponding CSS code looks like this:

profilebox {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 1em;
  margin-right: 0em;
  width: 400px;
  float: right;
  text-align: center;
  padding: 1em;
  border-color: black;
  border-style: solid;
  border-width: 0px 0px 0px 5px;
}

table {
  border-collapse: collapse;
  width: 600px;
}

.mini {
  width: 400px;
}

.maxi {
  width: 100%;
}

.pbox {
  width: 100%;
}

img {
  margin: 1em;
}

.pbox {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

figure.pbox {
  width: 100%;
}

It was expected that setting the width of the pbox class to 100% would make the table fill its parent element. However, when viewed in Chromium, the table appeared too narrow:

Table too narrow

Replacing 

<table class="pbox">
with 
<table class="maxi">
resulted in the desired outcome:

Table just right

Interestingly, the maxi and pbox classes of the table are actually identical! Can anyone shed some light on what might be causing this discrepancy?

htmlcss

Answer №1

My initial assumption was proven wrong when I thought that by including the following code:

CSS

element1 {
  property-a: setting1;
}

.class-name {
  property-b: setting2;
}

element2 {
  property-c: setting3;
}

.class-name {
  property-d: setting4;
}

HTML

  <element2 class="class-name"/>

I believed that element2 would have properties:

  • property-c: setting3;
  • property-d: setting4;

However, it turns out that all definitions of .class-name will be applied, resulting in element2 having properties:

  • property-b: setting2;
  • property-c: setting3;
  • property-d: setting4;

The solution came when I made adjustments to the CSS:

element1 {
  property-a: setting1;
}

element1.class-name {
  property-b: setting2;
}

element2 {
  property-c: setting3;
}

element2.class-name {
  property-d: setting4;
}

After these changes, everything worked perfectly!

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

Tips for customizing the appearance of li elements when hovering without changing the styles of their

Currently, I am tackling the task of customizing a sidebar menu using CSS. This menu structure involves nested <ul> and <li> elements. The issue at hand is that when sub-menu items are hovered over, their parent elements also become activated. ...

css

Issue with submitting Laravel form using post method

I've encountered an issue with a form that is supposed to post a title and a body, but when I submit it, nothing happens. I have included a csrf field and I am using the post method. Despite trying various methods to declare the action and the method ...

htmllaravelformssubmit

Angular noticed a shift in the expression once it was verified

Whenever I try to invoke a service within the (change) action method, I encounter this issue: ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Cur ...

javascripthtmlangulartypescript

keep the color of the link after clicking until a different link is clicked

At the bottom of every post on my website, there are 3 buttons: "Written By", "Related Post," and "In This Category": SoCatchy! I'm looking to have each button change color when clicked, and stay that way until another link is clicked. Here is the c ...

jqueryhtmlcsscolors

How do I retrieve the title of the current page and store it as a variable within Flask using Python?

Consider the following scenario with an HTML page; <html> <head> <title>Desired Title Value Goes Here</title> </head> <body> <h1>Hello World</h1> </body> </html> ...

pythonhtmlpython-3.xflaskjinja2

Using jQuery to iterate through an array and reverse its order

Is there a way to loop through an array and change the CSS background color chronologically rather than randomly? Additionally, is it possible to reverse through the same array when the back button is clicked? http://jsfiddle.net/qK2Dk/ $('#right&a ...

javascriptjquerycss

Is there a way to automatically load an entire Facebook profile in one go using a program?

Does anyone know a way to automatically download all photos from a Facebook profile, not just thumbnails? I'm thinking of using wget to fetch the page source code and then extract links to images from child a elements of all div with class="rq0e ...

htmlfacebookwebwget

Is there a way to use jQuery to permanently add elements and have them incrementally numbered, such as Cam 1, Cam 2, Cam 3, and so on, while using an iframe?

https://i.sstatic.net/XaYGc.pngRecently, I implemented a video streaming feature on my website. The default camera displayed is Cam 1 as shown in the code snippet below: <div class="card mb-3"> <div class="card-header"> <i class ...

javascriptphpjqueryhtml

Table with Bootstrap 4 drop-down navigation

I'm having some issues with a dropdown menu in Bootstrap 4. The problem arises within a table: https://i.sstatic.net/AbqTX.png When I click on the settings in the first row, a dropdown appears as expected: https://i.sstatic.net/xSfli.png However, ...

htmlcsstwitter-bootstrapsassbootstrap-4

Best practice for sending intricate variables to JavaScript via HTML

Steering away from PHP's htmlentities, I made a change in my code: <?php echo '<img ... onclick="MP.view(\''.$i->name.'\') />'; ?> However, I decided to go a different route by JSON encoding the ...

phpjavascripthtmljson

Understanding the dissimilarities between the input:disabled and input[disabled] CSS selectors

Is there a distinction between using the :disabled CSS pseudo-class selector and the [disabled] CSS attribute selector when applying styles to a disabled HTML input element, or are they essentially identical? Perhaps in terms of browser support or other ...

htmlcss

Guide to playing facebook in an iframe with javascript

I'm having trouble playing a Facebook video from an iframe using JavaScript. Can anyone help me figure it out? Here's what I've tried: <div onclick="play_fn()"> click here to play </div> <br> <script> function pla ...

javascriptjqueryhtmlfacebookiframe

Transfer data from a Django template populated with items from a forloop using Ajax to a Django view

Struggling to implement a click and populate div with ajax in my django e-commerce app. The function involves clicking on a category in the men's page which then populates another div. gender.html {%for cate in cat%} <a href="javascript:getcat()" ...

javascriptjqueryhtmlajaxdjango

Is there a way to create a spinning slot machine animation using CSS3 and jQuery?

I'm currently working on a demo application that will randomly choose a venue when a user clicks a button. My goal is to have the selected venues scroll through with a slot machine spinning animation created using CSS3 and jQuery. Initially, I consid ...

jqueryhtmlanimationcss

What is the best way to display an image right in the middle of the header?

My project consists of three main files - an HTML, a CSS, and a JS file. I have developed the HTML using the Bootstrap 5.1.3 framework. The issue I am facing pertains to the alignment of the clothing brand logo within the header section. Despite multiple ...

javascripthtmlcssbootstrap-5

Troubleshooting: Issue with JQUERY and Select box not syncing with database

I have a set of 3 checkboxes that are dynamically populated from a PHP database. I need help with implementing JQUERY functionality so that when any of the checkboxes are changed, the selected value is sent to a PHP file for processing and a response is re ...

phphtmljqueryforms

What is causing the colored SVG to appear lighter than the intended color after using a mask to recolor it?

I have a project using VueJS where I am trying to change the color of SVGs by looping through them and using mask and rect tags. However, I am noticing that as the icon index increases, the color of the icon becomes lighter. What could be causing this issu ...

htmlcsssvgmaskrect

Enabling Autoplay for HTML Videos on Safari iOS 14.2

Recently, I've observed that my autoplay videos are not functioning on iPhone iOS 14.2. Surprisingly, everything was working fine prior to this version. Is there anyone familiar with a solution or workaround for this issue? Perhaps there's a met ...

htmliosvideosafari

Transfer the file image stored in a MySQL database to an excel spreadsheet

Having an issue with capturing image data input from a PHP and HTML database to Excel. I am trying to display the images in a specific size within an Excel file. Below is the PHP code used to create the table: <?php header("Content-type: application/o ...

phpjavascriptmysqlhtmlexcel

Tips for displaying a scrollbar on your page

I have a creative vision I am currently pursuing. My goal is to create a div that displays as a fixed dimension box where different javascript functions will gradually input text. As the number of lines of text surpasses the height of the box, I envision a ...

javascriptjqueryhtmlcssscrollbar