Certain line borders are more robust compared to the rest

I have been working on a calendar application where I have designed boxes to display dates. However, I have encountered an issue where some of the line borders appear darker or thicker than others. Below is a snippet of my CSS and HTML code:

<style>
    section {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }

    section > div {
        border: 1px solid black;
        padding: 10px;
        height: 100px;
    }
</style> 

<section>
                    @for (int i = 0; i < numDummyColumns; i++)
                    {
                        <div></div>
                    }

                    @for (var i = 1; i <= _monthEnd.Day; i++)
                    {
                        var calendarItem = _calendarEntries.FirstOrDefault(n => n.Date == new DateTime(_year, _month, i));

                        <div>
                            <h2>@i</h2>
                            @if (calendarItem != null)
                            {
                                <p>@calendarItem.Title</p>
                            }
                        </div>
                    }
                </section>

https://i.sstatic.net/b9Rfj.png

Answer №1

When working with div elements instead of tables, the borders can be a bit tricky to manage. While tables have the convenient border-collapse: collapse property, divs require manual handling.

The issue arises when borders collide, creating a bolder border effect. To overcome this, you can set a margin of -1px on the left and top sides of the elements.

<style>
    section {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }

    section > div {
        border: 1px solid black;
        padding: 10px;
        height: 100px;
    }
  section > div + div {margin-left: -1px;}
  section > div:nth-child(7n+1) {margin-left: 0;}
  section > div:nth-child(n+8) {margin-top: -1px;}
</style> 

<section>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</section>

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 connecting a suspended div below a Bootstrap 5 fixed navigation bar

I successfully implemented a sticky navigation using Bootstrap 5, and now I want to add a hanging div (.chat-tag) below the sticky nav for a chat feature. This "hanging tag" should stay attached to the sticky nav as the user scrolls down the page. It&apos ...

Notification from HTML code within Django

In my Django project, I am trying to implement an alert. I am sending data from views.py to singup.html in order to display an alert based on certain conditions. However, initially the alert variable in HTML is not assigned a value. It is only after click ...

I have tried using justify-content: center; and align-items: center; to center this div, but the container div is still not centered. How can I successfully center

I am having trouble centering the container in my HTML code HTML code:- <body> <div class="container"> <div class="image"> <img src="./images/image-qr-code.png" alt="qrcode"> & ...

What methods could I use to prevent the WYSIWYG buttons from automatically linking?

I've been working on creating an editor but I'm facing a small issue. Every time I click on a button (such as bold or italic), it follows a link instead of performing the desired action. Here's a snippet of what I've tried so far: fu ...

How can I position a vertically centered image to the left of a block paragraph using inline styles?

I am faced with the challenge of aligning a 100x100 vertically-centered image to the left of a text block that extends beyond its height. It is important that the text does not wrap underneath the image but stays in a single block on the right side. I must ...

Issues with rendering images in the browser due to CSS inline-block layout are causing

I have encountered an issue with two divs that are set to 50% width and displayed inline-block. Each div contains an image. I expected both divs to stay on the same line, but sometimes the browser breaks the layout. Here is the HTML code snippet: <div ...

The link in the HTML code has been prevented from opening in a new

echo "<tr><th align='left'><a href=\"$email\">$name</a></th> I recently transformed a PHP Email App into a saving app. However, I am encountering an issue with opening links within the application. You ca ...

Enhanced Firefox functionality with support for multiple columns

It has come to my attention that Internet Explorer 9 and older versions do not support multiple columns. However, even with the latest version of Firefox, I am experiencing issues with this website loading correctly. Do you have any insight into what might ...

Clearing text fields in jQuery by cloning them

I am attempting to duplicate the friend fields (name + email) when the "add another friend" button is clicked. However, the cloned fields end up including the text inside them, which is not desired! Does anyone have any suggestions or solutions? Here is t ...

If the iframe's CSS source is updated, the parent's CSS source will also change

I'm currently working on a unique school project that involves creating multiple CSS styles for different views. <link rel="stylesheet" type="text/css" href="css/main.css" title="main" media="screen"> <link rel="stylesheet" type="text/css" h ...

Is it possible to update table cell content depending on selected option?

Displayed here is the select block: <form> <select id="select"> <option disabled selected value="choose"> CHOOSE </option> <option value="i2g" id="i ...

Issues with implementing CSS Icon Generated Content on a live Azure Web Role

My dilemma lies with my MVC4 web application that I'm attempting to deploy as an Azure web role. The site incorporates Metro UI CSS. While the deployed web role is functioning properly overall, I am encountering an issue with the CSS-generated conten ...

Tips for transitioning the li class from active to none

Struggling with changing the li class (of Home) from 'active' to none (or another class) when clicking on the profile tab, and then changing the li class (of Profile) from none to 'active' when the profile is activated. Snippet of my c ...

Tips for showcasing a search bar on Google search results

While browsing in Google, I came across websites that have a search bar displayed after their initial search result. This functionality allows users to easily search within the website as shown in the image below. I am intrigued and wondering how this can ...

The issue persists with the JavaScript window.location script constantly refreshing

I am currently working on a small web application where I want to update 2 parameters in the URL using Javascript. However, every time I use "window.location.search = 'scene.html?name=' + person + '&scene=' + readCookie("scene");", ...

Troubleshooting issue: Dropdown menu malfunctioning after using replaceWith() and appendTo()

I could really use some assistance. Admittedly, my knowledge of php, js, jquery, and similar languages is limited. I am currently working on a small web application where users fill out a form with specific requests, the data is then stored in a database, ...

Delete the label portion from the paper text area

Is it feasible to eliminate the excess space occupied by the label in a polymer text-area? Your assistance is greatly appreciated. ...

Invoke functions within a separate function

I am facing an issue when it comes to invoking functions within another function. Below is a snippet of the code I am working with: <script> function saveInfo() { function returnEmail() { var _e = document.getElementById("em ...

Beginning the phone application using either HTML5 or Cordova

Is there a way to use either HTML5 or Cordova (PhoneGap) to initiate a call to a phone number? I am looking to create a button that says "Call 555-555-5555", and when clicked, it opens the phone app on the device with that specific number. ...

Guidelines for determining a screen's location using Javascript

I have integrated a label onto an image and I am trying to figure out how to determine the exact position of each label on the screen. Is there a way to retrieve the screen coordinates for each label? Below is the code snippet that I have uploaded, perha ...