I have a div which (on initial rendering of the page) should base its size on the content that is in it. But there is a question mark icon with a hover function in it. When you hover over the…
In the example below, the two XORed bars do not completely cancel out when perfectly aligned. You can see their outline. How to make the outline disappear, which is what a correct XOR should do? .container { display: flex; flex-direction:…
I need the red marker to be identical to the green marker in its width and height. Note that the red marker displays on a blank space. I want the RED MARKER to mark the paragraph which is on the…
I have three different cards, each with varying content. I want to ensure that all elements within these cards maintain the same height, even though the content differs. The goal is to achieve a uniform look across all cards, as…
.table_outer { width: 500px; overflow-x: auto; /* Allow horizontal scrolling */ } table { width: 100%; min-width: max-content; /* Ensure table doesn't shrink below content width */ table-layout: fixed; /* Enforce fixed width for cells */ border-collapse: collapse; border: 1px…
HTML <div class="buttonFrame"><div class="btn"></div></div> CSS .buttonFrame { position: relative; width: 55px; height: 20px; border-radius: 12px; border: 2px solid black; overflow: hidden; top: 30%; left: 45%; z-index: 100px; } .btn { border-radius: 12px; width: 0%; height: 0%; background: linear-gradient( 90deg, rgba(2,…
I am using an HTML table where I am applying color to the table cells. The table cells have border-radius properties. But, an additional background can be seen after the border-radius is applied. Here is the image How to remove…
I try to animate the small bubbles in my svg. But when scale is applied it looks like it's applied to the distances between the bubbles rather than the bubbles only. It makes the buble to move to the side…
I have the following html: <div class="menu"> <div class="menu-item"> <div class="menu-label">Item 1</div> <button class="help">Button</button> </div> <div class="menu-item"> <div class="menu-label">Item 2</div> </div> <div class="menu-item"> <div class="menu-label">Item 3</div> </div> <div class="menu-item"> <div class="menu-label">Item 4</div> </div> </div> and the corresponding CSS here: .menu…
I am facing a big problem in css flex direction coding. I need first .column .left class in blue background and first .column .right class in red background. But second .column .left class in red background and second .column .right…