Having an issue with the border-radius function in Firefox. After applying it, I notice a strange space or border around the item. Does anyone know if this is a bug specific to Firefox or if there is a solution for it?
Here is an example of the problem: JsFiddle
The use of
border-radius:50%;
is definitely causing the issue.
It appears that there may be an issue in Firefox when rendering shadows with border-radius.
You can try out this simple trick:
Essentially, you can add a grey shadow to the parent li, make it slightly thinner, and then adjust the position of the child element a.ch-item to overlap the gap.
.ch-grid > li {
box-shadow: 0px 0px 5px 15px rgba(255, 255, 255, 0.6);
border-radius: 50%;
width: 198px;
height: 198px;
}
.ch-item {
position: relative;
top: -1px;
left: -1px;
}
Keep in mind that this is just a concept. You may also consider adding a hover effect to the li itself and adjusting its position for a better outcome.
Edit : Here's a link to see a improved result
After some experimenting, I've realized that even if I explicitly set: webdriver.Firefox( firefox_profile=webdriver.FirefoxProfile("/my/profile/path") ) Selenium essentially duplicates that profile and starts the browser using that dupl ...
Struggling to create a two-column layout that repeats in AngularJS using a JSON object of image data. I'm aiming for a display of images in a side-by-side format, but my odd/even logic seems to be off no matter what adjustments I make. Can anyone poin ...
Is it possible to determine the viewport height of my ng bootstrap modal within my Angular application? Here is what I currently have: I have a modal with CSS styling as shown below: .modal-xxl { width: 95% !important; max-height: 90% !important; ...
What I'm Looking For I want the data to be displayed when a user clicks on a link. The link should disappear after it's clicked. Code Attempt <a href="javascript:void(0);" class="viewdetail more" style="color:#8989D3!important;">vi ...
One challenge that perplexes me is how to reposition the concealed divs below the radio buttons with labels. Check out my HTML here View my CSS code here /*color palette: abls [lightest to darkest] #eeeeee #eaffc4 #b6c399 ...
In my project, there is an angular component named currency-selector with its dedicated css file defining the styling as shown below: .currency-select { position: absolute; top: 5px; right: 80px; z-index: 1000000; color: #DD642A; f ...
I am facing a challenge with the layout of my app on different screen sizes. To address this issue, I am utilizing Material UI's breakpoints to control the layout based on the screen size. According to the documentation, screens categorized as small ...
I'm struggling with customizing the background color of the active page due to complex HTML structure. I'm using responsive twitter bootstrap (2) and facing challenges. To view all tabs at the top, you need to stretch the viewing window. Below is ...
Currently, I am working on a project that involves implementing a "side pop up". To ensure it doesn't flicker like it does with jQuery's "hide()" method, I want to start by setting the display property to none using CSS. My main question is: - Ho ...
I am facing an issue with a programmatically created table that has n rows. To distinguish between odd and even rows, I programatically add classes to them. Some of these rows have "special" content that needs to be highlighted. Currently, I am accomplishi ...
I've been attempting to shift a single nav-item to the right side of the navbar, but I'm having trouble. My navbar is fairly basic, without a search tool or dropdown menu, as seen below: <nav class="navbar navbar-expand-lg bg-body-tertiar ...
I'm facing an issue where I have a row with two columns dictating the height, but one of them is shorter than the others. How can I make the shorter column stretch to match the height of the row? This inconsistency in height is causing disruption to ...
Initially, my plan was to incorporate collapsible rows into my table. However, considering the spacing and margins, I realized that approach wouldn't work. After some thought, I concluded that all I really need is a way to hide and show information on ...
I have created a page with a navigation menu that can be scrolled using the wheel mouse. My goal is to ensure that the li item with the 'selected' class is always positioned in the first position on the left. Is there a way to achieve this using ...
I am currently working on a project where users can create a seating chart, add rows and tables, and move the tables between different rows. The functionality for adding rows and moving tables already exists in the code. However, I am facing an issue where ...
When working in my local development environment, I have everything functioning as intended. However, after executing yarn build, all of my styles appear drastically different. The project was set up using create-react-app and styled with regular CSS. Bel ...
I am attempting to create a grid caret with a top and bottom caret that displays a grey area when the user hovers over each side. <div class="control-wrap"> <div class="caret-wrap"> <span class="caret">▲</span> </div&g ...
I'm currently developing a commenting feature, and I am in need of CSS to select every alternate child <div> (even children nested within the first set of children). Consider this example HTML structure: <body> <div class="comment"&g ...
I've been working on a React.js web app with Material UI components. The challenge I'm facing is with one specific component that handles the website management and displays a preview of custom content. This website, unlike the rest of the app, u ...
I am struggling to apply two repeating background images in the X direction for my div. Is there a way to achieve this? I want to divide my single div into two equal parts, using the first image with background repeat-x for the first part and the second ...