The border is not displaying for the Child Div element

I am struggling with a webpage that has two nested divs.

Despite trying all the suggestions I have found, I still cannot get the inner div to display its border. On the other hand, I have noticed that the parent div's border shows up without any issues. What could be the problem?

CSS

.contentItemsWrapper
{   
    margin:auto;

    width: 900px ;
    margin-left: auto ;
    margin-right: auto ;

    text-align:center;

    padding-top:20px;
    padding-bottom:20px;

    border:solid red;
        border-width:5px 0;
/*The border of this div is visible.*/   
}




.contentEventItem {
    font-family: Georgia, "Times New Roman", Times, serif;


    font-style: normal;
    font-weight: normal;
    position: relative;

    border:solid red;
        border-width:5px 0;

/*This last one is not working*/
}

HTML:

<div class="contentItemsWrapper">                
              <div class="contentEventItem style=" border:solid="" red;="" border-width:5px="" 0;="" "="" id="evento1">            
                <div class="DataIncontro" id="dataIncontro1">
                    <span class="month">December</span>
                    <span class="number">26</span>
                    <span class="time">15:00</span>
                    <span class="day">Thu</span>
                </div>

                <div class="logoSquadra"><span class="helper"></span><img name="" src="images/logo_nbb.png" alt="" style="background-color: #003399"></div>

                <div class="nameEventLocation" id="nameEventLocation1">
                    <strong class="eventname">New Basket Brindisi - Cremonese</strong>
                    <span class="location">Stadium Name</span>
                </div>

                <div class="logoSquadra"><img name="" src="images/logo_nbb.png" alt="" style="background-color: #003399"></div>


                <div class="noteEvento">Available online until xx December, 8:00pm</div>


                <div class="buttonDiv">
                  <p>
                    <a class="multi-line-button green" href="#" style="width:14em">
                      <span class="title">Buy Now!</span>
                      <span class="subtitle">30-days free!</span>
                    </a>
                  </p> 
                </div>

              </div>
            </div>

What could be the issue here? Can anyone offer some guidance or help?

Thank you for taking the time to assist me.

csshtmlborder

Answer №1

I'm feeling a bit unsure, are you looking for this?

CSS Styles:

.contentEventItem {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: normal;
    font-weight: normal;
    position: relative;
    border: 1px solid #000;
    /* The last property was not functioning properly */
}

All I did was include border: 1px solid #000; and remove this strange HTML line:

border:solid="" red;="" border-width:5px="" 0;="" "=""

View Demo Here

Answer №2

 border-width:5px 0;

If you need multiple borders with different styles, try specifying them individually like this:

border-bottom: 5px solid red;
border-top: 5px solid red;
border-left:none;
border-right:none;

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

I possess a certain input and am seeking a new and distinct output

I am looking to insert a word into an <input> and see an altered output. For example, Input = Michael Output = From Michael Jordan function modifyOutput() { var inputWord = document.getElementById("inputField").value; var outputText = "print ...

javascripthtml

Demonstrate complete attendance by detailing specific days of presence and days of absence within a specified date range

In order to track the attendance of employees, I have a log that records when an employee is present or absent on specific dates within a given interval. Let's consider the following date range: $from = "2019-03-01"; $to = "2019-03-05"; Here is a ...

phphtmlarrays

TinyMCE: Tips for adding and highlighting text in your content!

Is there a way to insert, or even replace the current selection with some content and then have it automatically selected? Take for instance this text: Hello nice world! The user has selected nice. After clicking a button, this code is executed: editor. ...

javascriptjqueryhtmltinymce

Using base64 encoding for font-face with alternative fallbacks

After reading this article, I am interested in incorporating a font face in the following way: @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); src: url('webfont.eot?#iefix') format('embedded-openty ...

css

What is causing my navbar's 'ol' element to have a wider width than the

Hello, I have a navigation bar with a dropdown menu using ol. However, when I hover over the list items, the width of the list exceeds that of the ol element. I believe this is due to the white-space: nowrap CSS property, but I want the text in the dropdow ...

jqueryhtmlcss

What are the methods for accessing data from a local Json file on an html page without using a server?

Looking to access a local Json file from an HTML page, but encountering challenges in reading the file on Chrome and IE. Is there a method to achieve this without relying on a web server? ...

htmlangularjsjson

Creating a variable in JavaScript

In my HTML body, I have set up a global variable named index with the value <%var index = 0;%>. This allows me to access it throughout the code. I'm trying to assign the value of $(this).val() to <% index %>, but I can't seem to get ...

javascriptjqueryhtmlnode.js

Interactive Image Effects with Hover using HTML and JavaScript

I have observed that the transform works fine, but there is a slight issue when initially hovering or touching the image. After the first touch or hover, everything works great. Any assistance on fixing this minor issue would be greatly appreciated. Thank ...

cssimagebootstrap-5mousehover

Deleting Data with HTML Using the HTTP DELETE Method

I've encountered an issue with making HTTP DELETE requests in webapp2. Currently, I've resorted to using a different URI with GET method as a temporary workaround. However, I'd prefer to implement a more RESTful approach. Upon inspecting th ...

pythonhtmlhttpwebapp2

Tips for incorporating fading text and a CTA into your content block

I am looking to protect the full content of my blog posts and allow access only to subscribed members. I want readers to see just a glimpse of the article before it disappears, prompting them to take action with a Call to Action (CTA) like in the fading te ...

javascripthtmlcssblogs

Ensure to verify the presence of a null value within the ngFor iteration

I have a webpage where I am displaying information in buttons. These buttons show various objects from a list along with their corresponding fields (e.g. object.name, object.age, etc.). Sometimes, one of those fields is null. How can I check if a value is ...

javascripthtmlangularjsangular

Switch div and expand/shrink the rest

Apologies for what might seem like a trivial question, but after working for a few hours now, I'm finding it difficult to wrap my head around this. My initial instinct is to handle this by manipulating the entire div structure with JavaScript, but I c ...

javascriptjqueryhtmlcsstwitter-bootstrap

Angular and Ionic collaborate by using ngFor to pass on the item.id during a (click) event

I have a list of items and I want to dynamically change the height of a card when I click on a button that is located on the card. Can anyone guide me on how to achieve this? I attempted to pass the item.id through a click event and use the id in a functi ...

htmlangulartypescriptionic-framework

Show or conceal advertisement based on user role

I have developed a custom Web Control that acts as a container for a mobile banner, but I want to hide it from users who are admins. So far, I've attempted the following: <mob:MobileBanner runat="server" ID="MobileBanner" Visible='<%# Not ...

htmlcssasp.netvb.netasp.net-webcontrol

The impact of angles on drop shadows in CSS3

Is there a way to replicate the shadow effect seen on the slider at using pure CSS? I've managed to recreate it in Photoshop, but I'm hoping to achieve the same result through CSS for a cleaner solution. ...

css

Versatile WordPress theme offering a variety of vibrant color options

Currently in the process of creating a WordPress theme, I am interested in incorporating various color schemes. After conducting research on both free and premium themes, it became apparent that different approaches are taken to achieve this feature. Wha ...

phphtmlwordpress

Let's talk about the CSS properties for centering content and automatically

I've been struggling with getting my navbar to center and adjust its width based on the content inside. Can anyone help me with this? <nav> <ul id="menu" class="black"> <li><a href="index.html">Home</a></l ...

htmlcsscenternavnavbar

Having trouble with your custom accordion content in React JS not sliding open?

Check out my progress so far with the fully functioning view here This is the structure of the Accordion component: const Accordion = ({ data }) => { return ( <div className={"wrapper"}> <ul className={"accordionList ...

javascriptcssreactjs

Revealing and concealing adjacent elements within a specified class

In an attempt to create a carousel that functions by hiding and showing images when the next and previous buttons are clicked, I have organized my images in a table and assigned the li elements a class of 'li'. There are four images in total, wit ...

javascriptjqueryhtmlcss

Saving user-generated inputs within a React.js component's state, focusing on securely handling passwords

Curious about forms in React.js? I don't have any issues, but I'm wondering if there are potential flaws in my approach. I've set up a basic form with two inputs for email and password: <input type="email" name="email" value= ...

javascripthtmlreactjs