Would it be possible to get the css calc function to function with an offset as shown below in IE11?
The following code does not produce the desired result in IE11:
div:nth-child(1) {
background: hsl(114.54545, 44%, calc(55.88235% * 1.1));
}
However, a static percentage value works:
div:nth-child(2) {
background: hsl(114.54545, 44%, 55.88235%);
}
If you want to lighten it up without using calc(), one approach is adding an extra white layer:
div:nth-child(1) {
background: hsl(114.54545, 44%, calc(55.88235% * 1.1));
}
div:nth-child(2) {
background: hsl(114.54545, 44%, 55.88235%);
position:relative;
z-index:0;
}
div:nth-child(2):before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(255,255,255,0.1);
}<div>calc</div>
<div>static</div>Another way to achieve this effect is by using multiple backgrounds:
div:nth-child(1) {
background: hsl(114.54545, 44%, calc(55.88235% * 1.1));
}
div:nth-child(2) {
background:
linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.1)),
hsl(114.54545, 44%, 55.88235%);
}<div>calc</div>
<div>static</div>I am facing an interesting problem where hovering over a skewed li element with a CSS3 transform and a shadow applied causes the generated shadow to display incorrectly. You can see the issue for yourself here - http://jsfiddle.net/mabbage/BLD5Z/1/ ...
I need help creating a customized navigation bar. I want the Services and Plans list items to display drop-down menus when clicked. However, instead of working as expected, I'm encountering an error message that says: 'cannot read property contai ...
Recently, I've been delving into the world of CSS and trying out "display:inline-block" as an alternative to "display:float". The general consensus from documentation is that properties commonly used on block elements can also be applied to inline-blo ...
margin-top is behaving differently in IE compared to Google Chrome. Two menus are supposed to be displayed one above the other in my design. The issue lies in the line margin-top:30%; within .anothermenu ul. In Chrome, the second menu appears above the f ...
I am currently facing an issue with centering 4 images on my website and my brain seems to have hit a roadblock in solving this problem. Here is the Fiddle link for reference -> http://jsfiddle.net/theminijohn/bcMX5/ Simply using the <center> ta ...
After working through a series of tutorials on [thedigitalcraft.com][1] to create my first dynamic website, I encountered an issue. Despite following tutorial number 15 closely and verifying all connections to the phpMyAdmin database in XAMPP localhost u ...
I'm struggling to understand the hierarchy in CSS for creating this specific layout. I've searched for explanations, but haven't found a clear one that breaks down how each level works. This is my first time working with CSS so it's bee ...
On my webpage, I have various div elements displayed. Each div has the options to move it up or down using the buttons labeled "UP" and "Down". When a user selects a div, they can then use these buttons to adjust its position. I am looking for a way to au ...
I've hidden other p tags and divs using display:none, How can I make them visible after inputting my name? I'd like to type in my name and reveal all the content within the previously hidden div <form method="post"> <p> < ...
Are there specific CSS selectors that can target Safari and Chrome exclusively? When attempting to target only Safari, I initially tried the following selector, but it seems to also target Chrome: html[data-useragent*="Safari"] { [...] } ...
After I generated a Maven dynamic web project using an archetype, I decided to organize the javascript, css, and image folders under the webapp folder. The structure now looks like this: myproject | main | | | java | | | resources | | ...
I attempted to have 2 columns appear side by side on tablets by using col-md-6 so that each column would only use 6 units. However, when switching from desktop to tablet size, the columns end up stacked vertically, with each column now using all 12 units ...
Currently, I am working on my portfolio and facing a challenge. I have an image in the body that I really want to display diagonally, but without using Photoshop. I've attempted to achieve this effect by utilizing CSS3 properties like transform rotate ...
Is there a way to align all text boxes in a single row that works properly in both IE and Chrome browsers? IE 11 display: https://i.sstatic.net/wGITo.png Chrome display: https://i.sstatic.net/jXs0r.png Textboxes are not aligned properly as shown below: ...
Trying to right-align text next to an image; CSS .p1 { position: absolute; width: 100px; height: 50px; top: 40%; left: 70%; } HTML <img src=../images/diagram1.png alt="Diagram"/> <span class="p1">This is a tes ...
Is there a way to place centered textboxes inside each of the colorful boxes in the image below? Update: I've posted my feeble attempt below. Admittedly, design is not my forte and I'm struggling with this task. p.s. To those who downvoted, tha ...
I have implemented a side navigation consisting of circular divs. Clicking on one scrolls you to the corresponding .block div, and everything functions correctly. However, I am now curious if it is feasible to highlight the relevant .nav-item div based on ...
I am facing an issue with the responsiveness of my MUIDatatables. The table is not adjusting properly to different window sizes. I specifically want each row in the table to be displayed on a single line and utilize horizontal scrolling. I attempted to pl ...
It's quite an odd problem I have. The effects display differently between localhost and the server, as illustrated below. Just a reminder: I'm using identical code for both environments. When uploaded to the server, the fancybox is not properly ...
My current challenge involves aligning an absolute element (an image) to the right edge of its container. Under normal circumstances, this alignment works seamlessly. However, when a transformation is applied, calculating the correct left property becomes ...