I am having an issue with my SVG used as a background image:
<div class="bubble"></div>
Here is the CSS I am using:
.bubble
{
background-image: url(https://beta.creasoft.cz/Images/bubble-small.svg);
background-repeat: no-repeat;
width: 48px;
height: 48px;
}
When viewing in IE 11 and zoomed in (at 105% or more), it appears distorted:
https://i.stack.imgur.com/1v5nB.jpg
However, it displays correctly in Chrome. Is there a solution to fix this issue?
Internet Explorer 11 does not have the capability to scale SVG images properly when the attributes viewBox, width, and height are explicitly defined. In your situation, specifying a width and height of 48px for the image will cause scaling issues in IE11.
A simple solution is to use a container for the SVG. Start by creating a container element to hold the SVG:
<div id="container">
<div class="bubble"></div>
</div>
Next, define the dimensions of the container and set the .bubble div or SVG's width: 100%:
#container {
width: 48px;
height: 48px;
}
.bubble {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-image: url('https://example.com/image.svg');
}
Make sure to remove any height and width attributes from the SVG file itself if they are present. For more information on dealing with SVGs in Internet Explorer, check out this resource.
I am currently attempting to design a multi-level mega menu that spans the full width of the screen, while keeping the content within it restricted to a maximum width of 1240px. I have managed to set the content to the maximum width, but I am facing challe ...
When CSS is used to hide scrollbar html, body { width: 100%; overflow-x: hidden } The above code snippet removes the scroll from the window but triggers it on the body element. To calculate the scroll values in such cases, you can use: pageOffset = ...
Some of the links on my website seem to be misbehaving and not following the CSS rules, floating to the left unexpectedly. Strangely, it's only the links that are affected; the rest of the text appears fine. For example, you can observe this issue at ...
Recently, I have encountered errors in the W3C validator due to the presence of "name" attributes in some <a> tags in my document. The validator flagged these attributes as obsolete. I am curious to know when and why this happened? Additionally, I n ...
I'm struggling with a layout of thumbnails on my page. We'll refer to them as A, B, C, etc. They are currently displayed like this: A, B, C, D, E, F, G, H, I, J, K, L, M, N... and so on. When you hover over one thumbnail, it enlarges by 2.5 t ...
I need help with a layout featuring three containers - Total (with a red border), Left (yellow border containing an image), and Right (blue border containing text). Left is set to approximately 30% width with float: left, while Right is set to 70% width w ...
I'm having trouble aligning my two buttons to the center. Additionally, I'm not sure how to remove the gray color from inside the buttons. Here is the code: index.html <!DOCTYPE html> <html> <head> <met ...
I've been experimenting with animating an SVG file to resemble the gif below, and I'm getting pretty close, but I seem to be encountering an issue where the outlines are drawn before being filled. I want the entire lines to be animated as shown i ...
I'm currently working on implementing AngularJS Infinite Scroll without using jQuery. My goal is to display the first 3 data items when the page loads and then load the next 3 data items from a JSON array object as the user scrolls. The issue I am fac ...
Is there a way to add space before bullet points? My requirements are as follows: This is paragraph 1 The first text line The second text line This is paragraph 2 The first text line The second text line I would greatly appreciate any ...
I've been tasked with converting a Figma design into an HTML page using Bootstrap 5. Take a look at the Figma design: https://i.sstatic.net/jo5Si.png However, there's an issue causing a vertical scroll bar to appear on the page. The culprit see ...
Having trouble with the ng-bootstrap datepicker when selecting style for month and year. https://i.sstatic.net/grlK6.png The issue seems to be with the select style. select[_ngcontent-c21] { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0 .5re ...
Is it possible to make the black color in a realistic gif animation transparent using CSS? The snow is white and everything else is black, but I want to overlay it on my header image with the snow falling realistically. I've seen animations of falling ...
After much effort, I still can't seem to get this working correctly. I've been playing around with a section named "RightExtra" and a div inside it called "RightExtraContent". My goal is to allow these two divs to move freely when the window is ...
As I am creating a form, my goal is to align the information within it in a way that places the questions on the left side and the options on the right. I have experimented with utilizing IDs, centering them, and adjusting their positioning from left to r ...
I am currently facing an issue with the prinzhorn/skrollr plugin when trying to use removeClass/addClass on scroll function. I have attempted to find a solution but unfortunately, nothing has worked for me. <li class="tab col s3"><a data-800="@cl ...
What is the method for attaching CSS to sp-copyright? <div class="container"> <div class="row"> <div id="sp-footer1" class="col-sm-12 col-md-12"> <div class="sp-column "> <span class="sp-copyright"> ...
I'm currently experimenting with dynamic functionality in ReactJS and I need to determine the position of a child relative to its parent. How can I achieve this in ReactJS? I have come across this post which discusses detecting relationships between ...
Currently, I am exploring CSS properties to create the visual appearance of a table using two levels of DOM elements. The highest-level element wraps around its child elements, which are styled to resemble a flat list. For example: <div class="t"> ...
After following a suggestion ("css only technique number 1" found here http://css-tricks.com/perfect-full-page-background-image/), I experimented with using an inline img element and CSS to create a background image that would occupy the entire browser win ...