Trouble with CSS styling in Drupal 7

After creating some simple pages, I included four html divs in one of the basic pages and also installed the cssinjector module. However, when attempting to write CSS code in cssinjector, it does not seem to be applying correctly on the width and height attributes in the HTML code.

The HTML code looks like this:

<div class=box1> </div>                           
<div class=box2> </div>                          
<div class=box3> </div>  

Here is the CSS code being used:

.box1 { 
 width:300px; 
 height:230px; 
} 
.box2 {
 width:300px; 
 height:230px; 
} 

.box3 { 
 width:300px; 
 height:230px; 
}                 

Answer №1

Big thanks to all for the responses,

I'm thrilled to report that I've managed to resolve the issue by making adjustments in my css code using css Injector and modifying the html code as follows:

.container 
{
    margin: 0px;
    width: 300px;
    height: 230px;
    display: inline-block;   
    background-color: rgb(20, 104, 168);
    border: 3px solid white;
   
}
<div class=container> </div>                           
<div class=container> </div>                          
<div class=container> </div>

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

Iterating through a variety of selectors on a webpage to consolidate and save into a single large data frame

I need help with a project and got a quick response last time, so here I am again. The code below is scraping data from a website and adding a column to indicate which instance of the table it is extracting. My current challenge is loading all Game Recency ...

Dealing with a passed EJS variable in string form

When working with passed data in ejs, I usually handle it like this and it works perfectly: let parsed_json = JSON.parse('<%-JSON.stringify(passed_data)%>'); However, I encountered a problem when trying to dynamically pass a string variabl ...

Elevate your Material UI Avatar with an added level of

Attempting to give a MUI Avatar component some elevation or shadow according to the documentation provided here. <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" /> Enclosing the Avatar within a paper or Card element increases the size o ...

Updating the innerHTML of a button with a specific id using Javascript is not possible due to it being "null."

My objective is to create a button that, when clicked, triggers a function to alter the styling of the HTML tag as well as the text or innerHTML of the button itself. Sounds simple enough, right? Unfortunately... The HTML: <!DOCTYPE html> <html& ...

Background image that covers the entire page

I am using background-size:cover to ensure that the entire background positioning area is covered by the background image. However, I've noticed that setting it to "cover" sometimes cuts off parts of my background image. Is there another way to achiev ...

Converting HTML and CSS to PDF in Java using iText

I've been working on converting HTML to PDF. Initially, I transformed my HTML code into XHTML using the resources provided in this link: After successfully displaying the generated XHTML code in a browser by creating an HTML file for testing purposes ...

Add a Page to Your Domain Name using the Text Input Box

I'm looking to create an input field that allows users to enter a text string, which will be added to a domain name when submitted, redirecting the user to a specific page. Here's how the process works: The user enters 'foo' into the ...

Issues when using PHP to upload files

Here is the code I'm currently using, but it's not working as expected: <label for="homepage"><h3>Home Page Image</h3></label><input type="hidden" name="MAX_FILE_SIZE" value="300000" /><input type="file" name="ho ...

Troubleshooting Div Element Width in CSS Not Functioning

When working on a form design, I encountered an issue where the text labels were not aligning to the same width. Despite setting the width, it didn't seem to work as expected: .form-label { display:inline; width: 160px; } <div class="form-label ...

Adjust the width of the scrollbar for the <aside> section

<aside class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-left ms-3" id="sidenav-main"></aside> Within this aside element, I have implemented a scrollbar. However, I am seeking to adjust ...

What is the best way to ensure there is only one space after every 4 characters in a string?

Looking for a way to make social security number input more readable by inserting a whitespace after the first 4 characters in the string. The social security number has a total of 10 numbers, so the desired format is: 1234 567890. Most solutions I found ...

Guide on changing JSON to HTML with a Groovy script

Looking to convert JSON to HTML using Groovy instead of Python due to running in Jenkins. Need help with Groovy code for the conversion. The JSON data : [ { "kubernetes.pod.name": "sds-endpoints-6-hn0fe2l", "container.id": "d19e001824978", "m ...

Is there a problem with the layout or indexing?

My website features a div that animates in using a jQuery click function, appearing over other divs that have animated in on $(document).ready(). Strangely, this div shows up behind the others only on the home page of my website and not on any other pages, ...

Nextjs fails to render components

I have my own website and I'm trying to create a contact section for it. Here is the code snippet I am using: <section className={styles.contact}> <p>Test</p> </section> Additionally, I've imported a style sheet with an ...

modify: adjust size of element

Issue with a child element transform: scale(0.544885); transform-origin: center; The child element is not properly centered within its parent container. Visit this link for more information. ...

The intersection of CSS and IE7's Z-Index feature

Hey there, I could really use some help! If anyone has any ideas for fixing a z-index issue in Internet Explorer 7 with CSS/JavaScript on this page while keeping the DOM structure intact (it's currently optimized for easy tab navigation), I would gre ...

Can combinators be applied to select elements containing options?

How can I use a select dropdown menu to toggle the appearance of a text input field? Specifically, when the option with a value of '4' is chosen, the text input should become visible. Here is the code snippet: HTML <div class="paren ...

Find the nearest class name in proximity

I am attempting to find the closest anchor element with a class that has been clicked. However, not all links will have a class assigned to them, so I need to consider the parent class as well. Since the class names will vary, hardcoding specific class nam ...

What is the best way to implement a function on every item within a specific class?

I'm new to coding and I have a website that showcases job listings. I want to create a function that dynamically changes the logo of a company based on the first 50 characters of the company name mentioned. The current function only works for the firs ...

Utilize jQuery to automatically assign numbers to <h1-h6> headings

Looking to develop a JavaScript function that can automatically number headings (h1- h6) for multiple projects without relying on CSS. Currently achieving this with CSS: body { counter-reset: h1; } h1 { counter-reset: h2; } h2 { counter-reset: h3; } ... T ...